<template>
  <div class="allOrderContainer allOrderContainer_box">
    <div id="download" style="width: 100%"></div>
    <otherOrderInfo
      v-if="showOtherOrderInfo"
      :closeOtherOrderInfo="closeOtherOrderInfo"
    ></otherOrderInfo>
    <!-- <div class="orderHeader" style="margin-top: 5px">
      <div class="orderSearch">
        <el-collapse accordion :disabled="true" ref="coll">
          <el-collapse-item>
            <template slot="title">
              <el-form ref="form" :model="orderSearch" @submit.native.prevent>
                <div class="orderSearch_header">
                  <div class="orderSearch_header_content">
                    <el-form-item label="订单号">
                      <el-input
                        @click.stop.native
                        v-model="orderSearch.order_no"
                        placeholder="支持批量搜索,多个单号用逗号分隔"
                        style="width: 230px"
                        @keyup.enter.native="submitForm"
                        @focus="titleFocus"
                        @blur="titleBlur"
                      />
                    </el-form-item>
                  </div>

                  <div class="orderSearch_header_button">
                    <el-form-item size="mini">
                      <el-button
                        type="primary"
                        @click.stop.native
                        icon="el-icon-search"
                        data-tracker="P2-1"
                        @click="displayOrders(1, 20)"
                        >查询</el-button
                      >
                      <el-button
                        plain
                        icon="el-icon-refresh-left"
                        @click.stop.native
                        data-tracker="P2-2"
                        @click="resultClickFn"
                        >重置</el-button
                      >
                    </el-form-item>
                  </div>
                </div>
              </el-form>
            </template>
            <template>
              <el-form ref="form" :model="orderSearch" :inline="true">
                <el-form-item label="订单状态">
                  <el-select
                    v-model="orderSearch.outlets"
                    multiple
                    clearable
                    @click.stop.native
                  >
                    <el-option
                      v-for="(item, index) in OpitonsData"
                      :key="index"
                      :value="item.item_code"
                      :label="item.item_name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="创建时间" size="mini">
                  <el-date-picker
                    @click.stop.native
                    v-model="orderSearch.time"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    style="width: 300px"
                    size="mini"
                    value-format="timestamp"
                    @change="handleDateChange"
                    :default-time="['00:00:00', '23:59:59']"
                  />
                </el-form-item>
                <el-form-item label="运单号">
                  <el-input
                    v-model="orderSearch.waybill_no"
                    placeholder="支持批量搜索,多个运单用逗号分隔"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="所属客户">
                  <el-select
                    placeholder="所属客户"
                    style="width: 220px"
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    :remote-method="searchCustomerList"
                    v-model="orderSearch.customer_id"
                  >
                    <el-option
                      v-for="(item, index) in customerPeopleData"
                      :key="index"
                      :value="item.id"
                      :label="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="客户所属大区">
                  <el-select
                    @change="$forceUpdate()"
                    style="width: 230px"
                    placeholder="请选择客户所属大区"
                    clearable
                    v-model="orderSearch.customer_area_id"
                  >
                    <el-option
                      v-for="website in websiteListDQ"
                      :key="website.id"
                      :label="website.name"
                      :value="website.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="发货人">
                  <el-input
                    v-model="orderSearch.sender_address"
                    placeholder="请输入发货人"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="发货人手机号">
                  <el-input
                    v-model="orderSearch.sender_phone"
                    placeholder="请输入发货人手机号"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="发货城市">
                  <el-cascader
                    style="width: 230px"
                    clearable
                    :options="areaData2"
                    filterable
                    v-model="orderSearch.sender_city_id"
                    placeholder="请选择省市区"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'next_level_data',
                    }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="发货公司">
                  <el-input
                    v-model="orderSearch.sender_company"
                    placeholder="发货公司"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="收货人">
                  <el-input
                    v-model="orderSearch.receiver_name"
                    placeholder="发货人"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="收货人手机号">
                  <el-input
                    v-model="orderSearch.receiver_phone"
                    placeholder="发货人手机号"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="收货城市">
                  <el-cascader
                    style="width: 230px"
                    clearable
                    :options="areaData2"
                    filterable
                    v-model="orderSearch.receiver_city_id"
                    placeholder="请选择省市区"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'next_level_data',
                    }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="收货公司">
                  <el-input
                    v-model="orderSearch.receiver_company"
                    placeholder="发货公司"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="出发区域">
                  <el-select
                    @change="$forceUpdate()"
                    style="width: 230px"
                    placeholder="请选择客户所属大区"
                    clearable
                    filterable
                    v-model="orderSearch.from_area_id"
                  >
                    <el-option
                      v-for="website in websiteListDQ"
                      :key="website.id"
                      :label="website.name"
                      :value="website.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="目的区域">
                  <el-select
                    style="width: 230px"
                    clearable
                    filterable
                    @change="$forceUpdate()"
                    v-model="orderSearch.to_area_id"
                  >
                    <el-option
                      v-for="website in websiteListDQ"
                      :key="website.id"
                      :label="website.name"
                      :value="website.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="出发网点">
                  <el-cascader
                    v-model="orderSearch.from_network_id"
                    :options="organizationBoxData"
                    :props="propsBranchType"
                    :show-all-levels="false"
                    clearable
                    filterable
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item label="目的网点">
                  <el-cascader
                    v-model="orderSearch.to_network_id"
                    :options="organizationBoxData"
                    :props="propsBranchType"
                    :show-all-levels="false"
                    clearable
                    filterable
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item label="承运类型">
                  <el-select
                    style="width: 195px"
                    clearable
                    multiple
                    v-model="orderSearch.waybill_product_type"
                  >
                    <el-option
                      v-for="type in transportsType"
                      :key="type.id"
                      :label="type.name"
                      :value="type.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="发站">
                  <el-input
                    v-model="orderSearch.from_region_name"
                    placeholder="发站"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="到站">
                  <el-input
                    v-model="orderSearch.to_region_name"
                    placeholder="到站"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="创建人">
                  <el-select
                    style="width: 195px"
                    clearable
                    v-model="orderSearch.creator_id"
                    filterable
                    placeholder="创建人"
                  >
                    <el-option
                      v-for="type in creator_List"
                      :key="type.id"
                      :label="type.nickname"
                      :value="type.id"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div> -->
    <div class="actions">
      <div class="actions_button">
        <div style="margin-bottom: 10px" class="button-wrap">
          <el-button
            id="order_create_icon"
            v-permission="'order_create'"
            type="primary"
            size="mini"
            plain
            data-tracker="P2-3"
            icon="el-icon-plus"
            @click="headaddOrder(true)"
            >创建订单</el-button
          >
        </div>
        <div class="button-wrap">
          <buttonPage
            :selectedNums="selectedNums"
            :displayOrders="displayOrders"
            :orderIdNums="orderIdNums"
            :exportdata="exportdata"
            :statusId="statusId"
          ></buttonPage>
        </div>
        <div
          style="margin-bottom: 10px"
          class="button-wrap"
          v-permission="'order_action_transfer_waybill'"
        >
          <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-edit"
            data-tracker="P2-11"
            class="editor"
            @click="TransferOrderFn"
            >转单</el-button
          >
        </div>
        <el-dropdown
          v-permission="'order_detail'"
          @command="handlePrint"
          divided
          class="button-wrap"
          v-if="isDushi && isHavePermission('order_detail')"
        >
          <el-button type="primary" plain>
            单独打印<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu
            class="operation-drop button-wrap"
            slot="dropdown"
            style="width: 150px"
          >
            <el-dropdown-item command="0">打印标签</el-dropdown-item>
            <el-dropdown-item command="1">打印运单(标准)</el-dropdown-item>
            <el-dropdown-item command="2">打印运单(通用)</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown
          @command="selectPrintPage"
          divided
          class="operation-drop button-wrap"
          @visible-change="handlePrintPages"
          v-permission="'order_data_print'"
        >
          <el-button type="primary" plain>
            批量打印<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu
            class="operation-drop"
            slot="dropdown"
            style="width: 150px"
          >
            <el-dropdown-item
              :key="item.id"
              :command="item.id"
              v-for="item in printPageList"
              >{{ item.template_data.template_name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-dialog
        title="填写包装数量"
        :visible.sync="dialogTableVisible"
        width="600px"
      >
        <el-table :data="multipleSelection">
          <el-table-column
            property="order_no"
            label="订单号"
            width="150"
          ></el-table-column>
          <el-table-column
            property="receiver_company"
            label="收货公司"
            width="250"
          ></el-table-column>
          <el-table-column
            property="total_package_quantity"
            label="包装数量"
            width="150"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.total_package_quantity"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitPackageNum">确 认</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="打印标签"
        :visible.sync="dialogLabelVisible"
        width="477px"
        :before-close="handleClose"
      >
        <div class="qianzhi_content" id="printMe">
          <div class="qianzhi_top">
            <div class="top_left"><img :src="logo" />渡石医药</div>
            <div class="top_right" style="margin-left: -10px">
              <span
                >{{
                  selectedDetail.goods
                    ? selectedDetail.goods.reduce((item1, item2) => {
                        return item1 + item2.number * 1;
                      }, 0)
                    : ""
                }}
                — {{ numberItem }}</span
              >
              <i>{{
                selectedDetail.create_time
                  ? new Date(Number(selectedDetail.create_time) * 1000)
                      .toLocaleString()
                      .replace(/:\d{1,2}$/, " ")
                  : ""
              }}</i>
            </div>
          </div>
          <div class="qianzhi_tm">
            <div style="height: 60px; margin-left: 5px">
              <canvas id="canvas"></canvas>
            </div>
            <div
              style="
                font-size: 16px;
                letter-spacing: 11px;
                margin-top: -10px;
                margin-left: 15px;
              "
            >
              {{
                selectedDetail.waybill_number
                  ? selectedDetail.waybill_number
                  : selectedDetail.order_no
              }}-{{ numberItem }}
            </div>
          </div>
          <div class="qianzhi_address">
            <span class="span1">目的地</span>
            <span
              >{{ selectedDetail ? selectedDetail.from_region : "" }}
              -
              {{ selectedDetail ? selectedDetail.to_region : "" }}</span
            >
          </div>
          <div class="qianzhi_sjr">
            <span class="span2">收件人</span>
            <span style="width: 377px">
              <i>{{
                selectedDetail.receiver ? selectedDetail.receiver.name : ""
              }}</i>
              <i>
                {{
                  selectedDetail.receiver ? selectedDetail.receiver.address : ""
                }}
              </i>
              <i>{{
                selectedDetail.receiver ? selectedDetail.receiver.phone : ""
              }}</i>
            </span>
          </div>
          <div class="shangj_code">
            <span class="span1"
              >温区：<i>{{ thermosphereData }}</i></span
            >
            <span
              >共<i>{{
                selectedDetail.goods
                  ? selectedDetail.goods.reduce((item1, item2) => {
                      return item1 + item2.number * 1;
                    }, 0)
                  : ""
              }}</i
              >件</span
            >
            <span
              >当前第<i>{{ numberItem }}</i
              >件</span
            >
          </div>
          <div class="qianzhi_detail">
            <div class="detail_left">
              <span>客户名称：</span>
              <span>{{
                selectedDetail.receiver ? selectedDetail.receiver.name : ""
              }}</span>
            </div>
            <div class="detail_right">
              <span>运输方式：</span>
              <div class="detail_c">
                <div style="padding-left: 70px">
                  {{ transportsWay }}
                </div>
                <div>
                  <font>重量：{{ goods_weight }}</font
                  ><i></i>
                </div>
                <div>
                  <font>体积：{{ goods_size }}</font
                  ><i></i>
                </div>
                <div>
                  <font
                    >件数：{{
                      selectedDetail.goods
                        ? selectedDetail.goods.reduce((item1, item2) => {
                            return item1 + item2.number * 1;
                          }, 0)
                        : ""
                    }}</font
                  ><i></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogLabelVisible = false;
              printTime = 1;
            "
            data-tracker="P3-14"
            >取 消</el-button
          >
          <el-button
            type="primary"
            v-print="printReciptObj"
            @click="toPrintReceipt"
            data-tracker="P3-13"
            >打 印</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="打印面单"
        :visible.sync="dialogVisibleFaceFn"
        width="960px"
        height="610px"
        :before-close="handleCloseFace"
      >
        <div
          class="facesheetContainer"
          id="printFace"
          :style="{
            'padding-right':
              toPrint === false && printType === false ? '0' : '50px',
          }"
        >
          <div class="facesheetLine1">
            <div class="line1_left">
              <div class="title">
                <div
                  class="editTitle"
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                >
                  <div
                    contenteditable="true"
                    style="
                      float: left;
                      font-family: 'SimSun';
                      color: #fff;
                      font-size: 27px;
                      display: inline-block;
                      height: 22px;
                      min-width: 20px;
                    "
                  ></div>
                  <div style="float: left">
                    {{ printType === false ? "渡石医药" : "" }}冷链运输详情单
                  </div>
                </div>
              </div>
              <div class="exception">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >填写前请务必仔细阅读背书,您的签名表示您认可运输服务条款。</span
                >
              </div>
            </div>
            <div class="line1_right">
              <div class="label1">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >条码单号</span
                >
              </div>
              <div class="qrcode" style="margin-top: -9px">
                <div style="height: 40px; overflow: hidden">
                  <canvas id="canvasFaceReceipt"></canvas>
                </div>

                <div class="waybillCode">
                  {{
                    selectedDetail.waybill_number
                      ? selectedDetail.waybill_number
                      : selectedDetail.order_no
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="facesheetLine2">
            <div class="line2_left">
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >寄件人姓名</span
                >
                <input
                  type="text"
                  :style="{
                    width: '110px',
                    'margin-left': '30px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.sender ? selectedDetail.sender.name : ''
                  "
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >始发地</span
                >
                <input
                  type="text"
                  :style="{
                    width: '130px',
                    'margin-left': '12px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.from_region ? selectedDetail.from_region : ''
                  "
                />
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >公司名称</span
                >
                <input
                  type="text"
                  :style="{
                    width: '318px',
                    'margin-left': '30px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.sender ? selectedDetail.sender.company : ''
                  "
                />
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >寄件地址</span
                >
                <input
                  type="text"
                  :style="{
                    width: '318px',
                    'margin-left': '30px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.sender ? selectedDetail.sender.address : ''
                  "
                />
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >联系电话</span
                >
                <input
                  type="text"
                  :style="{
                    width: '318px',
                    'margin-left': '30px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.sender ? selectedDetail.sender.phone : ''
                  "
                />
              </div>
            </div>
            <div class="line2_right">
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >收件人姓名</span
                >
                <input
                  type="text"
                  :style="{
                    width: '130px',
                    'margin-left': '20px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.receiver ? selectedDetail.receiver.name : ''
                  "
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >目的地</span
                >
                <input
                  type="text"
                  :style="{
                    width: '130px',
                    'margin-left': '20px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.to_region ? selectedDetail.to_region : ''
                  "
                />
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >公司名称</span
                >
                <input
                  type="text"
                  :style="{
                    width: '318px',
                    'margin-left': '20px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.receiver
                      ? selectedDetail.receiver.company
                      : ''
                  "
                />
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >收件地址</span
                >
                <input
                  type="text"
                  :style="{
                    width: '318px',
                    'margin-left': '20px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.receiver
                      ? selectedDetail.receiver.address
                      : ''
                  "
                />
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >联系电话</span
                >
                <input
                  type="text"
                  :style="{
                    width: '318px',
                    'margin-left': '20px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.receiver ? selectedDetail.receiver.phone : ''
                  "
                />
              </div>
            </div>
          </div>
          <div class="facesheetLine3">
            <div class="line3_left">
              <div class="infoLabel">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >冷链温层</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="
                    isIncubator
                      ? selectedDetail.goods[0].thermosphere === '1'
                      : selectedDetail.thermosphere === '1'
                  "
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >2~8℃</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="
                    isIncubator
                      ? selectedDetail.goods[0].thermosphere === '2'
                      : selectedDetail.thermosphere === '2'
                  "
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >-25~-15℃</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="
                    isIncubator
                      ? selectedDetail.goods[0].thermosphere === '3'
                      : selectedDetail.thermosphere === '3'
                  "
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >15~25℃</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="
                    isIncubator
                      ? selectedDetail.goods[0].thermosphere === '7'
                      : selectedDetail.thermosphere === '7'
                  "
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >-90℃~-78℃</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="
                    isIncubator
                      ? selectedDetail.goods[0].thermosphere === '6' ||
                        selectedDetail.goods[0].thermosphere === '8' ||
                        selectedDetail.goods[0].thermosphere === '9'
                      : selectedDetail.thermosphere === '6' ||
                        selectedDetail.thermosphere === '8' ||
                        selectedDetail.thermosphere === '9'
                  "
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >其它</span
                >
              </div>
            </div>
            <div class="line3_center">
              <div class="infoLabel">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >运输信息</span
                >
              </div>
              <span
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
                >货物品名</span
              ><input
                type="text"
                :style="{
                  width: '170px',
                  'margin-left': '5px',
                  'border-bottom':
                    printType === true ? '1px dashed #bebebe' : '',
                }"
                :value="
                  selectedDetail.goods ? selectedDetail.goods[0].name : ''
                "
              />
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >件数</span
                ><input
                  type="text"
                  :style="{
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.goods
                      ? selectedDetail.goods.reduce(
                          (pre, cur) => pre + cur.number * 1,
                          0
                        )
                      : ''
                  "
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >重量</span
                ><input
                  type="text"
                  :style="{
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.goods
                      ? selectedDetail.goods.reduce(
                          (pre, cur) => pre + cur.weight / 1,
                          0
                        ) === 0
                        ? ''
                        : selectedDetail.goods.reduce(
                            (pre, cur) => pre + cur.weight / 1,
                            0
                          )
                      : ''
                  "
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >体积</span
                ><input
                  type="text"
                  :style="{
                    width: '52px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.goods
                      ? selectedDetail.goods.reduce(
                          (pre, cur) => pre + cur.volume / 1,
                          0
                        ) === 0
                        ? ''
                        : selectedDetail.goods.reduce(
                            (pre, cur) => pre + cur.volume / 1,
                            0
                          )
                      : ''
                  "
                />
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >保温箱型号</span
                ><input
                  style="margin-left: 0px; width: 74px"
                  :style="{
                    'margin-left': '0px',
                    width: '74px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  type="text"
                  :value="
                    selectedDetail.goods
                      ? selectedDetail.goods.length > 1
                        ? '多个'
                        : Package_model_list.find(
                            (item) =>
                              item.item_code ===
                              selectedDetail.goods[0].package_type
                          )
                        ? Package_model_list.find(
                            (item) =>
                              item.item_code ===
                              selectedDetail.goods[0].package_type
                          ).item_name
                        : ''
                      : ''
                  "
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >温度计编号</span
                ><input
                  type="text"
                  :style="{
                    'margin-left': '0px',
                    width: '74px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                />
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >保温箱编号</span
                ><input
                  type="text"
                  :style="{
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >药品批号</span
                ><input
                  type="text"
                  :style="{
                    'margin-left': '0px',
                    width: '85px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                />
              </div>
            </div>
            <div class="line3_right">
              <div class="infoLabel">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >运输类型</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="selectedDetail.waybill_product_type_name === '冷链零担'"
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >冷链零担</span
                >
              </div>
              <div class="singleInfo">
                <span v-if="isIncubator">√</span>
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >保温箱</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="selectedDetail.waybill_product_type_name === '冷链城配'"
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >冷链城配</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="selectedDetail.waybill_product_type_name === '干冰箱'"
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >干冰箱</span
                >
              </div>
              <div class="singleInfo">
                <span
                  v-if="selectedDetail.waybill_product_type_name === '冷链整车'"
                  >√</span
                >
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >冷链整车</span
                >
              </div>
            </div>
          </div>
          <div class="facesheetLine4">
            <div class="line4_left">
              <div class="singleInfo">
                <span v-if="selectedDetail.insure_value === '1'">√</span>
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >投保</span
                >
              </div>
              <div class="singleInfo" style="margin: 17px 0px 25px 25px">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >声明价值</span
                >
                <input
                  type="text"
                  :style="{
                    width: '45px',
                    'margin-left': '25px',
                    'border-bottom':
                      printType === true ? '1px dashed #bebebe' : '',
                  }"
                  :value="
                    selectedDetail.goods
                      ? selectedDetail.goods.reduce(
                          (pre, cur) => pre + cur.declared_value / 1,
                          0
                        ) === 0
                        ? ''
                        : selectedDetail.goods.reduce(
                            (pre, cur) => pre + cur.declared_value / 1,
                            0
                          )
                      : ''
                  "
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >元（大写）</span
                >
              </div>
              <div class="singleInfo">
                <span v-if="selectedDetail.insure_value === '0'">√</span>
                <input
                  v-else
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >不投保</span
                >
              </div>
            </div>
            <div class="line4_center">
              <div class="infoLabel">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >增值服务</span
                >
              </div>
              <div class="singleInfo">
                <input
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >包装服务</span
                >
              </div>
              <div class="singleInfo">
                <input
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >配送服务</span
                >
              </div>
              <div class="singleInfo">
                <input
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >装车服务</span
                >
              </div>
              <div class="singleInfo">
                <input
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >送仓服务</span
                >
              </div>
              <div class="singleInfo">
                <input
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >卸车服务</span
                >
              </div>
              <div class="singleInfo">
                <input
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  type="checkbox"
                />
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >重货上楼</span
                >
              </div>
            </div>
            <div class="line4_right">
              <div class="infoLabel">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >付款方式</span
                >
              </div>
              <div class="infoArea">
                <div class="infoTitle">
                  <span
                    :style="{
                      visibility:
                        toPrint === false && printType === false
                          ? 'hidden'
                          : 'visible',
                    }"
                    >寄付</span
                  >
                </div>
                <div style="float: right; margin: 7px 5px">
                  <div class="singleInfo">
                    <span v-if="is_payment_method">√</span>
                    <input
                      v-else
                      :style="{
                        visibility:
                          toPrint === false && printType === false
                            ? 'hidden'
                            : 'visible',
                      }"
                      type="checkbox"
                    />
                    <span
                      :style="{
                        visibility:
                          toPrint === false && printType === false
                            ? 'hidden'
                            : 'visible',
                      }"
                      >月结</span
                    >
                  </div>
                  <div class="singleInfo">
                    <span
                      v-if="
                        selectedDetail.payment_id
                          ? selectedDetail.payment_id === '1'
                          : ''
                      "
                      >√</span
                    >
                    <input
                      v-else
                      :style="{
                        visibility:
                          toPrint === false && printType === false
                            ? 'hidden'
                            : 'visible',
                      }"
                      type="checkbox"
                    />
                    <span
                      :style="{
                        visibility:
                          toPrint === false && printType === false
                            ? 'hidden'
                            : 'visible',
                      }"
                      >现结</span
                    >
                  </div>
                </div>
              </div>
              <div class="infoArea">
                <div class="infoTitle">
                  <span
                    :style="{
                      visibility:
                        toPrint === false && printType === false
                          ? 'hidden'
                          : 'visible',
                    }"
                    >到付</span
                  >
                </div>
                <div style="float: right; margin: 7px 9px">
                  <div class="singleInfo">
                    <input
                      :style="{
                        visibility:
                          toPrint === false && printType === false
                            ? 'hidden'
                            : 'visible',
                      }"
                      type="checkbox"
                    />
                    <span
                      :style="{
                        visibility:
                          toPrint === false && printType === false
                            ? 'hidden'
                            : 'visible',
                      }"
                      >月结</span
                    >
                  </div>
                  <div class="singleInfo">
                    <input
                      :style="{
                        visibility:
                          toPrint === false && printType === false
                            ? 'hidden'
                            : 'visible',
                      }"
                      type="checkbox"
                    />
                    <span
                      :style="{
                        visibility:
                          toPrint === false && printType === false
                            ? 'hidden'
                            : 'visible',
                      }"
                      >现结</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="facesheetLine5">
            <div class="line5">
              <div class="infoLabel">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >揽收温度</span
                >
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >保温箱温度</span
                >
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >车辆温度</span
                >
              </div>
            </div>
            <div class="line5" style="float: right; width: 425px">
              <div class="infoLabel">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >配送温度</span
                >
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >保温箱温度</span
                >
              </div>
              <div class="singleInfo">
                <span
                  :style="{
                    visibility:
                      toPrint === false && printType === false
                        ? 'hidden'
                        : 'visible',
                  }"
                  >车辆温度</span
                >
              </div>
            </div>
          </div>
          <div class="facesheetLine6">
            <div class="line6_left1">
              <div
                class="singleInfo"
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
              >
                寄件人签名
              </div>
              <div
                class="singleInfo"
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
              >
                证件号
              </div>
              <div
                class="singleInfo"
                style="float: right"
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
              >
                年 /&nbsp;&nbsp;月 /&nbsp;&nbsp;日 /&nbsp;&nbsp;时 /
              </div>
            </div>
            <div class="line6_left2">
              <div
                class="singleInfo"
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
              >
                揽收人签名
              </div>
            </div>
            <div class="line6_right1">
              <div
                class="singleInfo"
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
              >
                收件人签名
              </div>
              <div
                class="singleInfo"
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
              >
                证件号
              </div>
              <div
                class="singleInfo"
                style="float: right"
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
              >
                年 /&nbsp;&nbsp;月 /&nbsp;&nbsp;日 /&nbsp;&nbsp;时 /
              </div>
            </div>
            <div class="line6_right2">
              <div
                class="singleInfo"
                :style="{
                  visibility:
                    toPrint === false && printType === false
                      ? 'hidden'
                      : 'visible',
                }"
              >
                配送人签名
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogVisibleFaceFn = false;
              toPrint = true;
              printType = false;
            "
            data-tracker="P3-16"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="toPrintFace"
            v-print="printFaceObj"
            data-tracker="P3-15"
            >打 印</el-button
          >
        </span>
      </el-dialog>

      <div class="actions_right">
        <span style="margin-right: 10px">
          <el-button
            type="primary"
            icon="el-icon-refresh-left"
            @click.stop.native
            data-tracker="P2-2"
            @click="resultClickFn"
            >重置</el-button
          >
        </span>

        <el-popover
          placement="top"
          width="570"
          v-model="visible"
          trigger="click"
        >
          <el-transfer
            ref="transfer"
            id="transfer"
            target-order="unshift"
            filterable
            :filter-method="filterMethod"
            @left-check-change="checkedChange"
            filter-placeholder="请输入字段名查询"
            :titles="['隐藏字段', '显示字段']"
            v-model="value"
            :data="data"
          >
            <span
              slot-scope="{ option }"
              class="item"
              @dragstart="drag($event, option)"
              >{{ option.label }}</span
            >
          </el-transfer>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="AddResultFn"
              >确定</el-button
            >
          </div>
          <el-button slot="reference"
            ><i class="el-icon-setting"></i
          ></el-button>
        </el-popover>
      </div>
    </div>
    <orderPop
      v-if="addOrder"
      :id="detailid"
      @dialogVisibleEvent="headaddOrder"
    ></orderPop>
    <div class="displayArea" v-if="statusShowType == false">
      <div v-if="HeaderData.length > 0">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :objheader="objheader"
          @childEvent="handleDelete"
          @orderIdNumsEvent="handleDeleteType"
        ></TableHeader>
      </div>
      <!-- <el-table
        ref="multipleTable"
        :max-height="maxheight"
        border
        stripe
        v-loading="loading"
        :data="orderlist"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="(item) => item.id"
      >
        <el-table-column
          type="selection"
          width="45"
          fixed="left"
          key="slot"
          v-if="numberLoding"
          :selectable="selectable"
        >
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="45"
          fixed="left"
          v-if="numberLoding"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index === 0 ? "" : scope.$index }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in HeaderData"
          :key="index"
          :prop="item.name"
          width="160"
          show-overflow-tooltip
        >
          <template slot="header">
            <span style="display: inline-block; width: 138px">
              {{ item.title }}</span
            >
          </template>
          <template slot-scope="scope">
            <div v-if="scope.$index == 0">
              <el-input
                style="width: 99%"
                v-model="orderSearch[item.name]"
                @input="changeValue"
                size="small"
                :placeholder="`请输入${item.title}`"
                v-if="
                  item.name != 'thermosphere_name' &&
                  item.name != 'total_goods_cnt' &&
                  item.url === '' &&
                  item.url_param === '' &&
                  item.name !== 'update_time' &&
                  item.name !== 'create_time' &&
                  item.name !== 'goods_name' &&
                  item.name !== 'is_reject_sign' &&
                  item.name !== 'package_type' &&
                  item.name !== 'package_quantity' &&
                  item.name !== 'is_void' &&
                  item.name !== 'payment' &&
                  item.name !== 'pay_status'
                "
              ></el-input>
              <div v-else>
                <el-select
                  style="width: 99%"
                  clearable
                  v-if="
                    item.name == 'thermosphere_id' &&
                    item.url !== '' &&
                    item.url_param === '{dictionary_code:thermosphere}'
                  "
                  @change="thermosphereChange"
                  v-model="orderSearch.thermosphere"
                >
                  <el-option
                    v-for="(item, index) in codesData"
                    :key="index"
                    :value="item.item_code"
                    :label="item.item_name"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="
                    item.name === 'creator_id' &&
                    item.url !== '' &&
                    item.url_param !== '' &&
                    item.title === '创建人'
                  "
                  filterable
                  clearable
                  @change="creatorChange"
                  v-model="orderSearch.creator_id"
                >
                  <el-option
                    v-for="type in creator_List"
                    :key="type.id"
                    :label="type.nickname"
                    :value="type.id"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="
                    item.name === 'customer_area_name' &&
                    item.send_name === 'customer_area_id' &&
                    item.url !== '' &&
                    item.url_param !== '' &&
                    item.title === '客户所属区域'
                  "
                  clearable
                  filterable
                  @change="creatortypeChange"
                  v-model="orderSearch.customer_area_id"
                >
                  <el-option
                    v-for="website in websiteListDQ"
                    :key="website.id"
                    :label="website.name"
                    :value="website.id"
                  />
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="
                    item.name === 'from_area_name' &&
                    item.send_name === 'from_area_id' &&
                    item.url !== '' &&
                    item.url_param !== '' &&
                    item.title === '出发区域'
                  "
                  clearable
                  filterable
                  @change="fromareaChange"
                  v-model="orderSearch.from_area_id"
                >
                  <el-option
                    v-for="website in websiteListDQ"
                    :key="website.id"
                    :label="website.name"
                    :value="website.id"
                  />
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="
                    item.name === 'to_area_name' &&
                    item.send_name === 'to_area_id' &&
                    item.url !== '' &&
                    item.url_param !== '' &&
                    item.title === '目的区域'
                  "
                  clearable
                  filterable
                  @change="toareaChange"
                  v-model="orderSearch.to_area_id"
                >
                  <el-option
                    v-for="website in websiteListDQ"
                    :key="website.id"
                    :label="website.name"
                    :value="website.id"
                  />
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="
                    item.name === 'creator_type' &&
                    item.url !== '' &&
                    item.url_param !== '' &&
                    item.title === '创建人类型'
                  "
                  filterable
                  clearable
                  @change="creatortypeChange"
                  v-model="orderSearch.creator_type"
                >
                  <el-option
                    v-for="type in creatortype"
                    :key="type.id"
                    :label="type.name"
                    :value="type.id"
                    >{{ type.name }}</el-option
                  >
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="
                    item.name === 'source_type' &&
                    item.url !== '' &&
                    item.url_param !== '' &&
                    item.title === '创建渠道'
                  "
                  filterable
                  clearable
                  @change="sourcetypeChange"
                  v-model="orderSearch.source_type"
                >
                  <el-option
                    v-for="type in sourcetype"
                    :key="type.id"
                    :label="type.name"
                    :value="type.id"
                    >{{ type.name }}</el-option
                  >
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="item.name === 'payment' && item.title === '付款方式'"
                  filterable
                  clearable
                  @change="displayOrders(1, 20)"
                  v-model="orderSearch.payment"
                >
                  <el-option
                    v-for="type in paymentMethodsList"
                    :key="type.item_code"
                    :label="type.item_name"
                    :value="type.item_code"
                    >{{ type.item_name }}</el-option
                  >
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="item.name === 'pay_status' && item.title === '支付状态'"
                  filterable
                  clearable
                  @change="displayOrders(1, 20)"
                  v-model="orderSearch.pay_status"
                >
                  <el-option
                    v-for="type in payStatusList"
                    :key="type.id"
                    :label="type.name"
                    :value="type.id"
                    >{{ type.name }}</el-option
                  >
                </el-select>
                <el-select
                  style="width: 99%"
                  clearable
                  v-if="
                    item.name == 'customer_id' &&
                    item.url !== '' &&
                    item.url_param !== '' &&
                    item.title == '所属客户'
                  "
                  filterable
                  @change="customerChange"
                  v-model="orderSearch.customer_id"
                >
                  <el-option
                    v-for="(item, index) in customerPeopleData"
                    :key="index"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 99%"
                  v-if="
                    item.name == 'status' &&
                    item.url !== '' &&
                    item.url_param === '{dictionary_code:order_status}'
                  "
                  v-model="orderSearch.outlets"
                  @change="statusChange"
                  multiple
                  clearable
                  @click.stop.native
                >
                  <el-option
                    v-for="(item, index) in OpitonsData"
                    :key="index"
                    :value="item.item_code"
                    :label="item.item_name"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 99%"
                  clearable
                  v-if="
                    item.name == 'waybill_product_type' &&
                    item.url !== '' &&
                    item.url_param === '{is_all:false}'
                  "
                  @change="waybillTypeChange"
                  multiple
                  v-model="orderSearch.waybill_product_type"
                >
                  <el-option
                    v-for="item in transportsType"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 99%"
                  clearable
                  v-if="
                    item.name == 'router_id' &&
                    item.url_param === '{router_id: 1}'
                  "
                  @change="routerChange"
                  v-model="orderSearch.router_id"
                >
                  <el-option
                    v-for="item in routerboxData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-cascader
                  style="width: 99%"
                  v-if="
                    item.name == 'to_network_id' &&
                    item.url_param == '{setout : true}' &&
                    item.send_name == 'to_network_id_array'
                  "
                  v-model="orderSearch.to_network_id"
                  :options="organizationBoxData"
                  :props="propsBranchType"
                  @change="tonetworkname"
                  clearable
                >
                </el-cascader>
                <el-cascader
                  style="width: 99%"
                  v-model="orderSearch.from_network_id"
                  v-if="
                    item.name == 'from_network_id' &&
                    item.url_param == '{setout : true}' &&
                    item.send_name == 'from_network_id_array'
                  "
                  :options="organizationBoxData"
                  :props="propsBranchType"
                  @change="fromnetworkname"
                  clearable
                >
                </el-cascader>
                <el-date-picker
                  v-if="
                    item.name == 'create_time' &&
                    item.url_param === '' &&
                    item.title == '创建时间'
                  "
                  @click.stop.native
                  v-model="orderSearch.time"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  style="width: 99%"
                  size="mini"
                  value-format="timestamp"
                  @change="creatpickerTime"
                  :default-time="['00:00:00', '23:59:59']"
                />
              </div>
            </div>
            <div v-else>
              <span
                class="span1"
                v-if="item.name == 'order_no'"
                style="cursor: pointer; color: #409eff"
                data-tracker="P2-12"
                @click="handleDelete(scope.$index, scope.row, true)"
                >{{ scope.row[item.name] }}</span
              >
              <span class="span1" v-else-if="item.name == 'source_type'">{{
                (
                  sourcetype.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).name
              }}</span>
              <span
                class="span1"
                v-else-if="item.name == 'thermosphere_name'"
                >{{ scope.row[item.name] }}</span
              >
              <span
                class="span1"
                v-else-if="item.name == 'waybill_product_type'"
                >{{
                  (
                    transportsType.find(
                      (itemTwo) => itemTwo.id == scope.row[item.name]
                    ) || {}
                  ).name
                }}</span
              >
              <span
                class="span1"
                v-else-if="item.name == 'customer_area_name'"
                >{{ scope.row[item.name] }}</span
              >
              <span class="span1" v-else-if="item.name == 'from_area_name'">{{
                scope.row[item.name]
              }}</span>
              <span class="span1" v-else-if="item.name == 'to_area_name'">
                {{ scope.row[item.name] }}
              </span>
              <span class="span1" v-else-if="item.name == 'from_network_id'">{{
                (
                  websiteList.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).name
              }}</span>
              <span class="span1" v-else-if="item.name == 'to_network_id'">{{
                (
                  websiteList.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).name
              }}</span>
              <span class="span1" v-else-if="item.name == 'creator_id'">{{
                (
                  creator_List.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).nickname
              }}</span>
              <span class="span1" v-else-if="item.name == 'creator_type'">{{
                (
                  creatortype.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).name
              }}</span>
              <span class="span1" v-else-if="item.name == 'status'">{{
                (
                  OpitonsData.find(
                    (itemTwo) => itemTwo.item_code == scope.row[item.name]
                  ) || {}
                ).item_name
              }}</span>
              <span class="span1" v-else-if="item.name == 'payment'">{{
                (
                  paymentMethodsList.find(
                    (itemTwo) => itemTwo.item_code == scope.row[item.name]
                  ) || {}
                ).item_name
              }}</span>
              <span class="span1" v-else-if="item.name == 'pay_status'">{{
                (
                  payStatusList.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).name
              }}</span>
              <span class="span1" v-else-if="item.name == 'create_time'">{{
                scope.row[item.name] === 0
                  ? ""
                  : new Date(
                      Number(scope.row[item.name]) * 1000
                    ).toLocaleString()
              }}</span>
              <span class="span1" v-else-if="item.name == 'thermosphere_id'">{{
                (
                  codesData.find(
                    (itemTwo) => itemTwo.item_code == scope.row[item.name]
                  ) || {}
                ).item_name
              }}</span>
              <span class="span1" v-else-if="item.name == 'router_id'">{{
                (
                  routerboxData.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).name
              }}</span>
              <span class="span1" v-else-if="item.name == 'customer_id'">{{
                (
                  customerPeopleData.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).name
              }}</span>
              <span class="span1" v-else-if="item.name == 'is_reject_sign'">{{
                (
                  ISrejectSign.find(
                    (itemTwo) => itemTwo.id == scope.row[item.name]
                  ) || {}
                ).value
              }}</span>
              <span class="span2" v-else>{{ scope.row[item.name] }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table> -->
      <div style="width: 100%; text-align: right; margin-top: 7px">
        <el-pagination
          small
          background
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <Allwaybill
      v-if="statusShowType == true"
      :id="orderIdNums[0]"
      :wayType="transfer_order"
    ></Allwaybill>
  </div>
</template>
<script>
import Sortable from "sortablejs";
import {
  reqPrintPageList,
  reqOrderFieldList,
  reqPrintPageDetail,
  reqModifyPackage,
  reqZTInfo,
} from "@/api/print";
import otherOrderInfo from "./components/otherOrderInfo";
import orderPop from "./components/orderPop";
import logoVImg from "@/assets/img/logo.png";

import {
  reqOrderFormData,
  order_details,
  dynamicHeaderList,
  dynamicHeaderCreate,
  dynamicHeaderUserList,
} from "@/api/orderForm";
import { customerPeople } from "@/api/information";
import buttonPage from "../../components/button/buttonPage.vue";
import { getToken } from "@/utils/auth";
import { uploading, regionList } from "@/page/material/common/common";
import {
  WaybillAddFn,
  dictionaryBatch,
  getTransportsList,
  reqHandlersList,
  getConsignorList,
  ConsigneeInterface,
  reqWebsiteList,
  regionbox,
  getRouterList,
  recognitionListcity,
  routerbox,
} from "@/api/waybill";
import { organizationBox } from "@/api/organization";
import { timestamp10, getParentIds } from "@/utils/mUtils";
import { reqDictionaryOptions } from "@/api/earlywarning";
import { time } from "echarts";
import Allwaybill from "../../components/waybillPop/Allwaybill.vue";
import jsbarcode from "jsbarcode";
// import smaVImg from "@/assets/img/sma.jpg";
// import titleVImg from "@/assets/img/title.jpg";
import { isHavePermission } from "@/utils/mUtils";
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import { sendClickTracker } from "@/utils/tracker";
export default {
  name: "Allorder",
  components: { orderPop, buttonPage, otherOrderInfo, Allwaybill, TableHeader }, //EditWaybill  orderHeader
  data() {
    return {
      visible: false,
      loading: false,
      numberLoding: false,
      routerOpitonsData: [], //获取路由
      // 导出的数据
      exportdata: [],
      // 地址库
      addresssequence: [],
      // 地址库二级
      areaData2: [],
      creatortype: [
        {
          id: "0",
          name: "员工",
        },
        {
          id: "1",
          name: "客户",
        },
        {
          id: "2",
          name: "司机",
        },
        {
          id: "3",
          name: "承运商",
        },
        {
          id: "4",
          name: "系统对接",
        },
      ],
      sourcetype: [
        {
          id: "0",
          name: "pc端",
        },
        {
          id: "1",
          name: "菜鸟",
        },
        {
          id: "2",
          name: "国药",
        },
        {
          id: "3",
          name: "小程序",
        },
      ],
      payStatusList: [
        {
          id: "0",
          name: "未支付",
        },
        {
          id: "1",
          name: "已支付",
        },
        {
          id: "2",
          name: "已退款",
        },
      ],
      paymentMethodsList: [],
      creatorPeopleData: [],
      detailid: "", //详情的id
      // logo: logoVImg,
      // tiaomaImg: tiaomaVImg,
      sortFlag: 0, //指定排序方式的
      addOrderVisible: false, //这个是点击添加订单的
      dialogVisible: false, //这个是打印预览的对话框
      dialogVisibleFaceFn: false, //打印面单
      setHeaderProperty: false, //添加表头属性的
      setHeaderProperty: false, //控制添加表头属性的对话框的显示隐藏
      dialogVisibletemperature: false,
      editflagShow: false,
      statusShowType: false,
      transfer_order: "transfer_order",
      selectedDetail: {},
      inputVal: {},
      pageNum: 1, //目前在第几页
      totalListNum: 10, //列表总数
      pageSize: 20, //一页多少条
      // 动态表头
      orderTitles: [],
      // 动态数据
      orderlist: [],
      orderListval: 0, //一共有多少条
      // 需要删除的参数
      orderdetele: [],
      // 判断全部选中的状态

      // 判断创建订单的显示与隐藏
      addOrder: false,
      allProperties: [], //设置动态表头
      showingProperties: [
        1, 3,
        //测试用显示列,写在这边的就会从左边的显示列表消失
      ],
      renderFunc(h, option) {
        //数据项的显示文案
        return <span>{option.label}</span>;
      },
      // printObj: {
      //   id: "printMe",
      //   popTitle: "打印模板",
      //   extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      // },
      orderInDetail: {},
      detailType: "",
      selectedNums: [],
      multipleSelection: [],
      showOtherOrderInfo: false,
      sumOrder: 0,
      orderId: [],
      orderIdNums: [],
      cascaderVisible: true,
      fullscreenLoading: false, //loading遮罩层
      direction: "rtl",
      options: [],
      options2: [],
      ThermosphereType: [], //温层的类型
      payMethods: [], //支付方式的类型
      transportsType: [], //承运产品类型
      Handlers: [], //经办人
      consignorList: [], //发货人
      consigneeList: [], //收货人
      websiteList: [], //网点
      areaType: [], //大区类型
      routerList: [], //路由
      costList: [], //费用
      deliveryMethodsList: [], //送货方式
      transportsWayList: [], //运输方式
      package_typeList: [], //保温箱型号
      is_incubator: "", //是否是保温箱
      is_receipt_customer: true,
      is_receipt_ds: true,
      fileList: [], //上传的文件
      dialogImageUrl: "",
      dialogVisible: false,
      formData: {
        images: [],
        token: "",
        waybill_code: "", //运单号 waybill_number
        transport_type: "", //承运类型 transport_type
        departure: "", //出发网点 from_network
        departure_id: [], //出发网点的id
        departure_station: "", //发站 from_region_id
        departure_station_name: "", //发站 from_region
        at_station: "", //到站 to_region_id
        at_station_name: "", //到站 to_region
        destination_network: "", //目的网点 to_network
        destination_network_id: [], //目的网点的id
        router_id: "", //路由的id
        router: "", //路由 router
        waybill_product_type: "", //产品类型 waybill_product_type
        Thermosphere: "", //温层 thermosphere
        ThermosphereName: "",
        area_type: "", //区域 area_type
        Delivery_method: "", // 送货方式 delivery_method
        insure_value: "0", //投保
        sender_pcd: [], //省市区的id
        sender: {
          id: "", //发货人的id
          name: "", //发货人 sender.name
          company: "", //单位
          company_id: "", //单位id
          phone: "", //发货人手机号 sender.phone
          province_id: "",
          city_id: "",
          district_id: "",
          address: "", //发货地址 sender.address
        },
        receiver_pcd: [], //省市区的id
        receiver: {
          id: "",
          name: "",
          company: "",
          company_id: "",
          phone: "",
          province_id: "",
          city_id: "",
          district_id: "",
          address: "",
        },
        expense: {}, //费用
        payment: {},
        fkfshi: "4", //付款方式 payment.payment_method
        Service_Charge: "",
        payment_goods: "",
        Handler: "", //经办人 handler_id
        handler_name: "",
        konghuo: "", //控货 goods_action
        tihuo: "", //提货 pick_up_goods
        Receipt: "", //回单 receipt_count
        type_shipping: "0", //运输方式 transport_way
        transport_days: "", //预计时效 aging
        remarks: "", //备注
        createTime: "",
        pickerTime_val: "", //提货时间
        is_view_freight: "0", //是否显示运费
      },
      goodsArray: [
        {
          name: "",
          packing: "", //包装
          package_quantity: "1", //包装数量
          goods_no: "", //编号
          number: "", //件数
          weight: "", //重量
          volume: "", //体积
          price: "", //价格
          declared_value: "", //价值
          thermosphere: "", //温层
          package_type: "", //保温箱型号
        },
      ],
      shipperList: [],
      propsData: [],
      orderSearch: {
        // 查询订单的相关信息
        order_no: "",
        outlets: [],
        orderState: "",
        create_time: {
          start_time: 1664553600000,
          end_time: new Date().getTime() + 3600000,
        },
        time: [1664553600000, new Date().getTime() + 3600000],
        sender_name: "", //发货人
        sender_phone: "", //发货人手机号
        sender_city_id: [], //发货人城市
        sender_company: "", //发货公司
        receiver_name: "", //收货人
        receiver_phone: "", //收货人手机号
        receiver_city_id: [], //收货人城市
        receiver_company: "", //收货人公司
        to_network_id: [], //目的网点
        from_network_id: [], //始发网点
        from_area_id: [], //出发区域
        to_area_id: [], //目的区域
        customer_area_id: "", //客户区域
        waybill_no: "", //运单号
        waybill_product_type: [], //承运类型
        from_region_name: "", //发站
        to_region_name: "", //到站
        from_network_name: "",
        to_network_name: "",
        thermosphere: "",
        sender_address: "",
        receiver_address: "",
        creatpickerTime: "",
        router: "",
        router_id: "",
        customer_id: "",
        creator_id: "",
        creator_type: "",
        source_type: "",
        payment: "",
        pay_status: "",
        total_goods_cnt: "",
      },
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      router: this.$router.path,
      OpitonsData: [
        {
          item_code: "5",
          item_name: "已签收",
        },
        {
          item_code: "4",
          item_name: "配送中",
        },
        {
          item_code: "3",
          item_name: "运输中",
        },
        {
          item_code: "2",
          item_name: "揽收中",
        },
        {
          item_code: "1",
          item_name: "已受理",
        },
        {
          item_code: "0",
          item_name: "待受理",
        },
      ], //订单状态
      statusId: [],
      flagShow: false,
      regionboxList: [],
      addressBox: [],
      maxheight: 400,
      printPageList: [], //打印用的模板列表
      logo: logoVImg,
      // tiaomaImg: tiaomaVImg,
      // smaImg: smaVImg,
      // titleImg: titleVImg,
      printTime: 1,
      dialogVisibleFaceFn: false, //打印面单
      dialogLabelVisible: false, //打印标签
      dialogTableVisible: false,
      printReciptObj: {
        id: "#printMe",
      },
      toPrint: true, //false是不显示背景
      printFaceObj: {
        id: "printFace",
        beforeOpenCallback(vue) {
          this.toPrint = false;
          vue.printLoading = true;
        },
      },
      printType: false, //false是通用,true是吉因加
      printPageList: [], //打印用的模板列表
      LODOP: {},
      titleStr: "", //批量打印用
      mainlyStr: "", //批量打印用
      toPrintStr: "", //批量打印用
      numberItem: 1,
      thermosphereData: "",
      transportsWayList: [], //运输方式
      creator_List: [], //创建人
      transportsWay: "",
      Package_model_list: [],
      goods_weight: 0,
      goods_size: 0,
      is_payment_method: false,
      HeaderData: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      draggingKey: "",
      menuFilterMethod(query, item) {
        const regStr = query.replace(/\*/g, ".*");
        const reg = new RegExp(regStr);
        return reg.test(item.label);
      },
      data: [],
      value: [], //右边一列的值
      codesData: [],
      routerboxData: [],
      selectDataId: "",
      thermosphereData: "",
      statusData: "",
      waybillTypeData: "",
      routerDataNum: "",
      organizationBoxData: [],
      propsBranchType: {
        emitPath: true,
        checkStrictly: true,
        value: "id",
        label: "branch_name",
        children: "next_level_data",
      },
      fromnetworknameData: [],
      tonetworknameData: [],
      customerPeopleData: [],
      websiteListDQ: [],
      ISrejectSign: [
        {
          id: "0",
          value: "否",
        },
        {
          id: "1",
          value: "是",
        },
      ],
      whether: "", //用来判断订单是否作废
      header_data_list: [],
      propMap: {},
      obj_list: {},
      isIncubator: false,
    };
  },
  computed: {
    totalFreight() {
      let num = 0;
      for (var item in this.formData.expense) {
        if (
          item != 2 &&
          item != 3 &&
          item != 7 &&
          item != 12 &&
          item !== "total_freight"
        ) {
          num += this.formData.expense[item] * 1;
        }
      }
      return num.toFixed(2);
    },
    isDushi() {
      const id = JSON.parse(
        localStorage.getItem("user" || "{}")
      ).saas_company_id;
      return id === 1;
    },
  },
  watch: {
    totalFreight: {
      deep: true,
      handler() {
        let num = 0;
        for (var item in this.formData.expense) {
          if (
            item != 2 &&
            item != 3 &&
            item != 7 &&
            item != 12 &&
            item !== "total_freight"
          ) {
            num += this.formData.expense[item] * 1;
          }
        }
        this.autoUpdateFee(this.formData.fkfshi);
        return num;
      },
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.handleDelete("", this.$route.query, true);
    }
    this.dynamicHeaderListFn();
    this.organizationBoxFn();
    this.getThermosphereType();
    this.searchCustomerList();
    this.getWebsiteListDQFn();
    this.Pagecreator(); //获取员工
    this.searchRouterListFn();
    this.getThermosphereTypeFn();
    // 地址库
    this.provincectiy();
    // 二级地址库
    this.childeprovicectiy();
    // 目的网点
    this.getWebsiteList();
    const transfer = this.$refs.transfer.$el;
    const leftPanel = transfer
      .getElementsByClassName("el-transfer-panel")[0]
      .getElementsByClassName("el-transfer-panel__body")[0];
    const rightPanel = transfer
      .getElementsByClassName("el-transfer-panel")[1]
      .getElementsByClassName("el-transfer-panel__body")[0];
    const rightEl = rightPanel.getElementsByClassName(
      "el-transfer-panel__list"
    )[0];
    Sortable.create(rightEl, {
      animation: 100,
      onEnd: (evt) => {
        const { oldIndex, newIndex } = evt;
        const temp = this.value[oldIndex];
        if (!temp || temp === "undefined") {
          return;
        }
        for (var i = 0; i < this.value.length; i++) {
          if (
            this.value[i] === "" ||
            this.value[i] === null ||
            typeof this.value[i] === "undefined"
          ) {
            this.value.splice(i, 1);
            i = i - 1;
          }
        }
        const arr_temp = [].concat(this.value); // 创建一个新的临时数组，用以操作后不变更原数组
        arr_temp.splice(newIndex, 0, arr_temp.splice(oldIndex, 1)[0]); // 在b位置插入从a位置截取的元素
        this.value = arr_temp;
        this.$emit("update:call-back", this.value);
      },
    });
    const leftEl = leftPanel.getElementsByClassName(
      "el-transfer-panel__list"
    )[0];
    Sortable.create(leftEl, {
      animation: 100,
      onEnd: (evt) => {
        const { oldIndex, newIndex } = evt;
        const temp = this.datas[oldIndex];
        this.$set(this.datas, oldIndex, this.datas[newIndex]);
        this.$set(this.datas, newIndex, temp);
      },
    });
    leftPanel.ondragover = (ev) => {
      ev.preventDefault();
    };
    leftPanel.ondrop = (ev) => {
      ev.preventDefault();
      const index = this.value.indexOf(this.draggingKey);
      if (index !== -1) {
        this.value.splice(ev, 1);
      }
    };
    rightPanel.ondragover = (ev) => {
      ev.preventDefault();
    };
    rightPanel.ondrop = (ev) => {
      ev.preventDefault();
      if (this.value.indexOf(this.draggingKey) === -1) {
        this.value.push(this.draggingKey);
      }
    };
    if (this.$route.query.type == "ordernumber") {
      this.addOrder = true;
    } else if (this.$route.query.type == "orderList") {
      this.orderSearch.outlets = [];
    } else if (this.$route.query.type != undefined) {
      this.orderSearch.outlets = [this.$route.query.type];
    } else {
      this.orderSearch.outlets = [];
    }
  },
  methods: {
    isHavePermission(val) {
      return isHavePermission(val);
    },
    // 用户列表接口
    Pagecreator() {
      reqHandlersList().then((res) => {
        this.creator_List = res.data;
      });
    },

    //获取所属客户
    searchCustomerList(query) {
      //获取客户
      if (query !== "") {
        setTimeout(async () => {
          let result = await customerPeople({
            name: query, // 名称
            id: "",
            is_send: "1",
            is_receive: "",
          });
          if (result.data.length > 0) {
            this.customerPeopleData = result.data;
          } else {
            this.customerPeopleData = [];
          }
        }, 200);
      } else {
        this.customerPeopleData = [];
      }
    },
    creatpickerTime(val) {
      if (val) {
        this.orderSearch.create_time.start_time = timestamp10(val[0]);
        this.orderSearch.create_time.end_time = timestamp10(val[1]);
      } else {
        this.orderSearch.create_time.start_time = "";
        this.orderSearch.create_time.end_time = "";
      }
      this.displayOrders(this.pageNum, this.pageSize);
    },
    //获取级联组织架构
    changeSenderAddress(val) {
      this.formData.sender.province_name = "";
      this.formData.sender.city_name = "";
      this.formData.sender.district_name = "";
      this.formData.departure_station_name = this.addresssequence
        .find((item) => item.id === val[0])
        .next_level_data.find((item) => item.id === val[1]).name;
    },
    changeReceiverAddress(val) {
      this.formData.receiver.province_name = "";
      this.formData.receiver.city_name = "";
      this.formData.receiver.district_name = "";
      this.formData.at_station_name = this.addresssequence
        .find((item) => item.id === val[0])
        .next_level_data.find((item) => item.id === val[1]).name;
    },
    organizationBoxFn() {
      let data = {
        show_employee: false, // 是否展示员工信息
        not_show_first_branch: 1,
      };
      organizationBox(data).then((res) => {
        if (res.code === 10000) {
          this.organizationBoxData = res.data;
        }
      });
    },
    //获取路由
    searchRouterListFn() {
      let data = {
        router_id: this.formData.router_id,
        router: this.formData.router,
      };
      routerbox(data).then((res) => {
        if (res.code === 10000) {
          this.routerboxData = res.data;
        }
      });
    },
    //获取区域
    async getWebsiteListDQFn() {
      let result = await reqWebsiteList({ type: "3" });
      this.websiteListDQ = result.data || [];
    },
    //获取温层
    getThermosphereTypeFn() {
      dictionaryBatch({ codes: ["thermosphere"] }).then((res) => {
        if (res.code === 10000) {
          this.codesData = res.data.list.thermosphere;
        }
      });
    },
    //左侧列表数据
    checkedChange(val) {},
    async handlePrintPages() {
      //点击选中某个打印模板之后
      let module = await import("@/utils/lodop/LodopFuncs");
      module.getLodop();
      if (this.printPageList.length === 0) {
        let result = await reqPrintPageList({});
        this.printPageList = result.data.list.filter(
          (item) => item.template_data.template_name !== "保温箱标签"
        );
      }
    },
    async printWaybills(e) {
      let module = await import("@/utils/lodop/LodopFuncs");
      // module.getLodop();
      //循环生成打印代码的函数,用于批量打印
      let joinStr;
      let splitStr;
      let sliceStr;
      let waybillStr = [];
      this.orderIdNums.forEach(async (waybill, waybillIndex) => {
        let fieldDetail;
        let pageDetail;
        let result1 = await reqOrderFieldList({ order_id: waybill * 1 });
        fieldDetail = result1.data;
        let pushArr = [];
        //将多余的单选框选项与应该出现的值加到数组里面
        fieldDetail.forEach((item, index) => {
          if (item.chinese_name === "承运产品类型") {
            if (item.value === "保温箱") {
              pushArr = pushArr.concat([
                {
                  chinese_name: "baowenxiang",
                  value: "√",
                },
                {
                  chinese_name: "冷链零担",
                  value: "",
                },
                {
                  chinese_name: "冷链整车",
                  value: "",
                },
                {
                  chinese_name: "ganbingxiang",
                  value: "",
                },
              ]);
            } else if (item.value === "干冰箱") {
              pushArr = pushArr.concat([
                {
                  chinese_name: "ganbingxiang",
                  value: "√",
                },
                {
                  chinese_name: "冷链零担",
                  value: "",
                },
                {
                  chinese_name: "冷链整车",
                  value: "",
                },
                {
                  chinese_name: "baowenxiang",
                  value: "",
                },
              ]);
            }
            if (item.value === "冷链零担") {
              pushArr = pushArr.concat([
                {
                  chinese_name: "冷链零担",
                  value: "√",
                },
                {
                  chinese_name: "baowenxiang",
                  value: "",
                },
                {
                  chinese_name: "冷链整车",
                  value: "",
                },
                {
                  chinese_name: "ganbingxiang",
                  value: "",
                },
              ]);
            } else if (item.value === "冷链整车") {
              pushArr = pushArr.concat([
                {
                  chinese_name: "冷链整车",
                  value: "√",
                },
                {
                  chinese_name: "baowenxiang",
                  value: "",
                },
                {
                  chinese_name: "冷链零担",
                  value: "",
                },
                {
                  chinese_name: "ganbingxiang",
                  value: "",
                },
              ]);
            } else {
              pushArr = pushArr.concat([
                {
                  chinese_name: "冷链零担",
                  value: "",
                },
                {
                  chinese_name: "baowenxiang",
                  value: "",
                },
                {
                  chinese_name: "冷链整车",
                  value: "",
                },
                {
                  chinese_name: "ganbingxiang",
                  value: "",
                },
              ]);
            }
          } else if (item.chinese_name === "是否投保") {
            if (item.value === "是") {
              pushArr = pushArr.concat([
                {
                  chinese_name: "是",
                  value: "√",
                },
                {
                  chinese_name: "否",
                  value: "",
                },
              ]);
            } else if (item.value === "否") {
              pushArr = pushArr.concat([
                {
                  chinese_name: "否",
                  value: "√",
                },
                {
                  chinese_name: "是",
                  value: "",
                },
              ]);
            }
          } else if (item.chinese_name === "付款方式") {
            if (item.value === "月结" || item.value === " 月结") {
              pushArr = pushArr.concat([
                {
                  chinese_name: "月结",
                  value: "√",
                },
                {
                  chinese_name: "现付",
                  value: "",
                },
              ]);
            } else if (item.value === "现付") {
              pushArr = pushArr.concat([
                {
                  chinese_name: "现付",
                  value: "√",
                },
                {
                  chinese_name: "月结",
                  value: "",
                },
              ]);
            } else {
              pushArr = pushArr.concat([
                {
                  chinese_name: "现付",
                  value: "",
                },
                {
                  chinese_name: "月结",
                  value: "",
                },
              ]);
            }
          } else if (item.chinese_name === "温层") {
            if (
              this.printPageList
                .find((item) => item.id === e)
                .template_data.template_name.indexOf("标签") === -1
            ) {
              if (item.value === "-25℃以下") {
                pushArr = pushArr.concat([
                  {
                    chinese_name: "-25℃以下",
                    value: "√",
                  },
                  {
                    chinese_name: "0- 30℃",
                    value: "",
                  },
                  {
                    chinese_name: "-60~-90℃",
                    value: "",
                  },
                  {
                    chinese_name: "15~25℃",
                    value: "",
                  },
                  {
                    chinese_name: "2~8℃",
                    value: "",
                  },
                  {
                    chinese_name: "-15~-25℃",
                    value: "",
                  },
                  {
                    chinese_name: "otherThermosphere",
                    value: item.value,
                  },
                ]);
              } else if (item.value === "0- 30℃") {
                pushArr = pushArr.concat([
                  {
                    chinese_name: "0- 30℃",
                    value: "√",
                  },
                  {
                    chinese_name: "-25℃以下",
                    value: "",
                  },
                  {
                    chinese_name: "-60~-90℃",
                    value: "",
                  },
                  {
                    chinese_name: "15~25℃",
                    value: "",
                  },
                  {
                    chinese_name: "2~8℃",
                    value: "",
                  },
                  {
                    chinese_name: "-15~-25℃",
                    value: "",
                  },
                  {
                    chinese_name: "otherThermosphere",
                    value: item.value,
                  },
                ]);
              } else if (item.value === "-60~-90℃") {
                pushArr = pushArr.concat([
                  {
                    chinese_name: "-60~-90℃",
                    value: "√",
                  },
                  {
                    chinese_name: "-25℃以下",
                    value: "",
                  },
                  {
                    chinese_name: "0- 30℃",
                    value: "",
                  },
                  {
                    chinese_name: "15~25℃",
                    value: "",
                  },
                  {
                    chinese_name: "2~8℃",
                    value: "",
                  },
                  {
                    chinese_name: "-15~-25℃",
                    value: "",
                  },
                  {
                    chinese_name: "otherThermosphere",
                    value: "",
                  },
                ]);
              } else if (item.value === "15~25℃") {
                pushArr = pushArr.concat([
                  {
                    chinese_name: "15~25℃",
                    value: "√",
                  },
                  {
                    chinese_name: "-25℃以下",
                    value: "",
                  },
                  {
                    chinese_name: "-60~-90℃",
                    value: "",
                  },
                  {
                    chinese_name: "0- 30℃",
                    value: "",
                  },
                  {
                    chinese_name: "2~8℃",
                    value: "",
                  },
                  {
                    chinese_name: "-15~-25℃",
                    value: "",
                  },
                  {
                    chinese_name: "otherThermosphere",
                    value: "",
                  },
                ]);
              } else if (item.value === "2~8℃") {
                pushArr = pushArr.concat([
                  {
                    chinese_name: "2~8℃",
                    value: "√",
                  },
                  {
                    chinese_name: "-25℃以下",
                    value: "",
                  },
                  {
                    chinese_name: "-60~-90℃",
                    value: "",
                  },
                  {
                    chinese_name: "15~25℃",
                    value: "",
                  },
                  {
                    chinese_name: "0- 30℃",
                    value: "",
                  },
                  {
                    chinese_name: "-15~-25℃",
                    value: "",
                  },
                  {
                    chinese_name: "otherThermosphere",
                    value: "",
                  },
                ]);
              } else if (item.value === "-15~-25℃") {
                pushArr = pushArr.concat([
                  {
                    chinese_name: "-15~-25℃",
                    value: "√",
                  },
                  {
                    chinese_name: "-25℃以下",
                    value: "",
                  },
                  {
                    chinese_name: "-60~-90℃",
                    value: "",
                  },
                  {
                    chinese_name: "15~25℃",
                    value: "",
                  },
                  {
                    chinese_name: "2~8℃",
                    value: "",
                  },
                  {
                    chinese_name: "0- 30℃",
                    value: "",
                  },
                  {
                    chinese_name: "otherThermosphere",
                    value: "",
                  },
                ]);
              } else {
                pushArr = pushArr.concat([
                  {
                    chinese_name: "-15~-25℃",
                    value: "",
                  },
                  {
                    chinese_name: "-25℃以下",
                    value: "",
                  },
                  {
                    chinese_name: "-60~-90℃",
                    value: "",
                  },
                  {
                    chinese_name: "15~25℃",
                    value: "",
                  },
                  {
                    chinese_name: "2~8℃",
                    value: "",
                  },
                  {
                    chinese_name: "0- 30℃",
                    value: "√",
                  },
                  {
                    chinese_name: "otherThermosphere",
                    value: item.value,
                  },
                ]);
              }
            }
          } else if (item.chinese_name === "收货人姓名") {
            pushArr.push({
              chinese_name: item.chinese_name,
              value: item.value,
            });
          } else if (item.chinese_name === "包装数量") {
            pushArr.push(
              {
                chinese_name: item.chinese_name,
                value: item.value,
              },
              {
                chinese_name: item.chinese_name,
                value: item.value,
              }
            );
          } else if (item.chinese_name === "订单号") {
            pushArr.push(
              {
                chinese_name: "运单号",
                value: item.value,
              },
              {
                chinese_name: "yundanhao",
                value: item.value,
              }
            );
          }
        });
        fieldDetail = fieldDetail.concat(pushArr);
        let result2 = await reqPrintPageDetail({
          id: e, //这个是模板的id
        });
        pageDetail = result2.data.template_data.template_design;
        this.LODOP = module.getLodop();
        fieldDetail.forEach((item) => {
          item.value = item.value.replace(/\s*/g, "");
          pageDetail = pageDetail.replace(item.chinese_name, item.value);
        });
        if (
          this.printPageList
            .find((item) => item.id === e)
            .template_data.template_name.indexOf("标签") === -1
        ) {
          //非标签打印时每份内容都一样
          splitStr = JSON.parse(pageDetail).split(";");
          // splitStr.pop();
          this.titleStr = splitStr.slice(0, 2); //最开始init的那几行
          sliceStr = splitStr.slice(2);
          sliceStr.splice(sliceStr.length - 1, 0, "\r\nLODOP.NewPage()"); //加一行
          sliceStr.pop(); //删除最后的换行符
          waybillStr = waybillStr.concat(sliceStr);
          // joinStr = waybillStr.join(";");
          this.mainlyStr = waybillStr;
        } else {
          //标签打印时需要每打一份就加一下
          let goodsValue =
            fieldDetail.find((item) => item.chinese_name === "包装数量").value *
            1;
          for (var goodsIndex = 0; goodsIndex < goodsValue; goodsIndex++) {
            let detailAdd = pageDetail.replace(/number/g, goodsIndex + 1);
            splitStr = JSON.parse(detailAdd).split(";");
            this.titleStr = splitStr.slice(0, 2); //最开始init的那几行
            sliceStr = splitStr.slice(2);
            sliceStr.splice(sliceStr.length - 1, 0, "\r\nLODOP.NewPage()"); //加一行
            sliceStr.pop(); //删除最后的换行符
            waybillStr = waybillStr.concat(sliceStr);
            this.mainlyStr = waybillStr;
          }
        }
      });
      setTimeout(() => {
        this.toPrintStr =
          this.titleStr.join(";") + this.mainlyStr.join(";").slice(0, -15);
      }, 1500);
    },
    async getZTOPrintInfo(e) {
      //  let result = await reqZTInfo({
      //   order_no: this.multipleSelection[0].order_no,
      // });
      let module = await import("@/utils/lodop/LodopFuncs");
      // module.getLodop();
      //循环生成打印代码的函数,用于批量打印
      let joinStr;
      let splitStr;
      let sliceStr;
      let waybillStr = [];
      let ztoresult = await reqZTInfo({
        order_no: this.multipleSelection[0].order_no,
      });
      if (ztoresult.code !== 10000) return;
      ztoresult.data.forEach(async (ztoItem) => {
        let fieldDetail;
        let pageDetail;
        fieldDetail = ztoItem;
        let result2 = await reqPrintPageDetail({
          id: e, //这个是模板的id
        });
        pageDetail = result2.data.template_data.template_design;
        this.LODOP = module.getLodop();
        fieldDetail.forEach((item) => {
          if (item["chinese_name"] === "printedName") {
            item.value = JSON.parse(localStorage.getItem("user")).nickname;
          }
          if (item["chinese_name"] === "qrCode") {
            //不然识别不出来JSON
            item.value = item.value.replace(/"/g, "'");
          }
          pageDetail = pageDetail.replace(item.chinese_name, item.value);
        });
        console.log(pageDetail, "pageDetail");
        //非标签打印时每份内容都一样
        splitStr = JSON.parse(pageDetail).split(";");
        // splitStr.pop();
        this.titleStr = splitStr.slice(0, 2); //最开始init的那几行
        sliceStr = splitStr.slice(2);
        sliceStr.splice(sliceStr.length - 1, 0, "\r\nLODOP.NewPage()"); //加一行
        sliceStr.pop(); //删除最后的换行符
        waybillStr = waybillStr.concat(sliceStr);
        // joinStr = waybillStr.join(";");
        this.mainlyStr = waybillStr;
      });
      setTimeout(() => {
        this.toPrintStr =
          this.titleStr.join(";") + this.mainlyStr.join(";").slice(0, -15);
      }, 1500);
    },
    nextToPrint(e, flag) {
      let that = this;
      if (flag === "zto") {
        this.getZTOPrintInfo(e);
      } else {
        this.printWaybills(e);
      }
      if (this.toPrintStr) {
        setTimeout(() => {
          eval(this.toPrintStr);
          LODOP.PRINT_DESIGN();
          // LODOP.PREVIEW();
        }, 2000);
      } else {
        setTimeout(() => {
          eval(this.toPrintStr);
          LODOP.PRINT_DESIGN();
          // LODOP.PREVIEW();
        }, 3000);
      }
      if (LODOP.CVERSION)
        CLODOP.On_Return = function (TaskID, Value) {
          if (that.toPrintStr) {
            that.toPrintStr = "";
            that.titleStr = "";
            that.mainlyStr = "";
          } else {
          }
        };
    },
    async submitPackageNum() {
      let result = await reqModifyPackage({
        items: this.multipleSelection.map((item) => {
          return {
            waybill_id: item.waybill_id,
            incubator_count: item.total_package_quantity,
          };
        }),
      });
      if (result.code !== 10000) {
        this.$message({
          type: "error",
          message: result.message,
        });
        return;
      }
      this.dialogTableVisible = false;
      this.nextToPrint(
        this.printPageList.find(
          (item) => item.template_data.template_name == "标签"
        ).id
      );
      this.$message({
        type: "success",
        message: "提交成功,加载中......",
      });
    },
    selectPrintPage(e) {
      if (this.orderIdNums.length >= 1) {
        if (
          this.printPageList
            .find((item) => item.id == e)
            .template_data.template_name.indexOf("中通") !== -1
        ) {
          this.nextToPrint(e, "zto");
          return;
        }
        if (
          this.printPageList.find((item) => item.id == e).template_data
            .template_name == "标签"
        ) {
          this.dialogTableVisible = true;
          return;
        }
        this.nextToPrint(e);
      } else {
        this.$message({
          type: "warning",
          message: "至少选择一个运单",
        });
      }
      sendClickTracker("P2-25");
    },
    //根据详细地址获取省市区 发货人信息
    detailSendAddress(address) {
      let data = {
        detail_address: address,
      };
      recognitionListcity(data).then((res) => {
        if (
          res.data.province_name === "暂无省信息" ||
          res.data.city_name === "暂无市信息" ||
          res.data.area_name === "暂无区信息"
        ) {
          this.$message({
            message: "请选择发货方的省市区地址",
            type: "error",
          });
          this.formData.sender.province_name = "";
          this.formData.sender.city_name = "";
          this.formData.sender.district_name = "";
          this.formData.sender_pcd = [];
          return;
        }
        if (res.data.province_id && res.data.city_id && res.data.area_id) {
          this.formData.sender_pcd = [
            res.data.province_id,
            res.data.city_id,
            res.data.area_id,
          ];
          this.formData.sender.province_name = res.data.province_name;
          this.formData.sender.city_name = res.data.city_name;
          this.formData.sender.district_name = res.data.area_name;

          this.formData.departure_station_name = res.data.city_name;
        } else {
          this.$message({
            message: "请填写完整的收货地址",
            type: "error",
          });
          return;
        }
      });
    },
    //根据详细地址获取省市区 收货人信息
    DetailReceiverAddress(address) {
      let data = {
        detail_address: address,
      };
      recognitionListcity(data).then((res) => {
        if (
          res.data.province_name === "暂无省信息" ||
          res.data.city_name === "暂无市信息" ||
          res.data.area_name === "暂无区信息"
        ) {
          this.$message({
            message: "请选择收货方的省市区地址",
            type: "error",
          });
          this.formData.receiver.province_name = "";
          this.formData.receiver.city_name = "";
          this.formData.receiver.district_name = "";
          this.formData.receiver_pcd = [];
          return;
        }
        if (res.data.province_id && res.data.city_id && res.data.area_id) {
          this.formData.receiver_pcd = [
            res.data.province_id,
            res.data.city_id,
            res.data.area_id,
          ];
          this.formData.receiver.province_name = res.data.province_name;
          this.formData.receiver.city_name = res.data.city_name;
          this.formData.receiver.district_name = res.data.area_name;

          this.formData.at_station_name = res.data.city_name;
        } else {
          this.$message({
            message: "请填写完整的收货地址",
            type: "error",
          });
          return;
        }
      });
    },
    changeSenderAddress(val) {
      this.formData.sender.province_name = "";
      this.formData.sender.city_name = "";
      this.formData.sender.district_name = "";
      this.formData.departure_station_name = this.addresssequence
        .find((item) => item.id === val[0])
        .next_level_data.find((item) => item.id === val[1]).name;
    },
    changeReceiverAddress(val) {
      this.formData.receiver.province_name = "";
      this.formData.receiver.city_name = "";
      this.formData.receiver.district_name = "";
      this.formData.at_station_name = this.addresssequence
        .find((item) => item.id === val[0])
        .next_level_data.find((item) => item.id === val[1]).name;
    },
    async handleJump(scope, index) {
      const waybill_id_list = (scope.row.waybill_id || "").split(",") || [];
      const id = waybill_id_list[index];
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id, activeName: "1" },
      });
      window.open(text.href, "_blank");
    },
    FuzhiaddressChange() {
      let data = {
        detail_address: this.formData.receiver.address,
      };
      recognitionListcity(data).then((res) => {
        this.formData.receiver_pcd = [
          res.data.province_id,
          res.data.city_id,
          res.data.area_id,
        ];
      });
    },
    // 地址库
    provincectiy() {
      regionList(0).then((res) => {
        this.addresssequence = res.data;
      });
    },
    // 地址库改为二级
    childeprovicectiy(data) {
      regionList(0).then((res) => {
        var resdata = res.data;
        resdata.forEach((item) => {
          item.next_level_data.forEach((iten) => {
            iten.next_level_data = undefined;
          });
        });
        this.areaData2 = resdata;
      });
    },
    handlePrint(val) {
      //点击选中某个打印模板之后
      const Fn = ["openPrintLabel", "openFaceReceipt", "printJYJ"][val];
      this[Fn] && this[Fn]();
      const tracker = ["P2-22", "P2-23", "P2-24"][val];
      sendClickTracker(tracker);
    },
    // 揽收时间变化
    handleDateChange(val) {
      if (val) {
        this.orderSearch.create_time.start_time = timestamp10(val[0]);
        this.orderSearch.create_time.end_time = timestamp10(val[1]);
      } else {
        this.orderSearch.create_time.start_time = "";
        this.orderSearch.create_time.end_time = "";
      }
    },
    // 上传的功能
    beforeRemove(file, fileList) {
      return this.$confirm("是否删除该图片");
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      const index = this.formData.images.findIndex(
        (item) => item.uid === file.uid
      );
      index > -1 && this.formData.images.splice(index, 1);
    },
    handleChange(file, fileList, type) {
      this.fileList = fileList;
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((res) => {
        this.formData.images.push({
          type: "0",
          uid: file.uid,
          url: res.res.requestUrls[0],
        });
      });
    },
    headaddOrder(val, isUpdate = true) {
      this.addOrder = val;
      this.$store.commit("ADD_Order", { type: "add" });
      isUpdate && this.displayOrders(1, 20);
    },
    // 详情
    handleDelete(index, id, type) {
      // console.log("jflksajdflkasjdlf");
      this.detailid = id.id;
      this.addOrder = type;
      this.$store.commit("ADD_Order", { type: "onlyread" });
    },
    handleSelectionChange(val) {
      // console.log(val, "DS2304090161val");
      this.multipleSelection = val;
      this.sumOrder = val.length;
      this.whether = val[0] ? val[0].is_void : "否";
      if (val.length > 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.orderIdNums = this.multipleSelection.map((item) =>
            Number(item.id)
          );
          this.statusId = this.multipleSelection.map((item) => item.status);
        }
      } else {
        this.orderIdNums = [];
        this.statusId = [];
      }
    },
    //转单操作API函数
    async TransferOrderFn() {
      if (this.orderIdNums.length === 1) {
        if (this.multipleSelection != "") {
          this.orderIdNums = [
            this.orderlist.find(
              (item) => item.id === this.multipleSelection[0].id
            ).id * 1,
          ];
          this.statusId = [
            this.orderlist.find(
              (item) => item.id === this.multipleSelection[0].id
            ).status,
          ];
        }

        if (this.whether == "否") {
          if (this.statusId >= 2) {
            this.$message({
              type: "warning",
              message: "已转运单,不能再次转运单！",
            });
          } else {
            if (this.statusId.includes("0")) {
              this.$message({
                type: "warning",
                message: "必须为已受理状态才能转单！",
              });
            } else {
              let result = await regionbox({
                name: "",
              });
              this.regionboxList = result.data;
              this.getThermosphereType();
              this.getHandlersList();
              this.getWebsiteList();
              this.getAreaList();
              this.editflagShow = false;
              this.statusShowType = true;
            }
          }
        } else {
          this.$message({
            type: "warning",
            message: "订单已经作废,不能转单！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "选择一条数据转单！",
        });
      }
    },
    //重置按钮
    resultClickFn() {
      // this.orderSearch = {
      //   // 查询订单的相关信息
      //   order_no: "",
      //   outlets: [],
      //   orderState: "",
      //   create_time: {
      //     start_time: 1664553600000,
      //     end_time: new Date().getTime(),
      //   },
      //   time: [1664553600000, new Date().getTime()],
      //   sender_address: "",
      //   sender_phone: "",
      //   sender_city_id: "",
      //   sender_company: "",
      //   receiver_name: "",
      //   receiver_phone: "",
      //   receiver_city_id: "",
      //   receiver_company: "",
      //   to_network_id: [],
      //   waybill_no: "",
      //   waybill_product_type: "",
      //   from_region_name: "",
      //   to_region_name: "",
      //   status: "",
      //   source_type: "",
      //   payment: "",
      //   pay_status: "",
      //   router_id: "",
      //   router: "",
      //   receiver_address: "",
      //   thermosphere: "",
      //   creator_id: "",
      //   creator_type: "",
      //   customer_area_id: "",
      // };
      // this.orderSearch.router_id = "";
      // this.orderSearch.source_type = "";
      // this.orderSearch.customer_id = "";
      // this.orderSearch.creator_id = "";
      // this.orderSearch.creator_type = "";
      // this.orderSearch.customer_area_id = "";
      // this.orderSearch.from_network_id = [];
      // this.orderSearch.to_network_id = [];
      // this.orderSearch.outlets = [];
      // this.orderSearch.waybill_product_type = [];
      // this.orderSearch.thermosphere = "";
      // this.orderSearch.from_area_id = "";
      // this.orderSearch.to_area_id = "";
      // this.objheader({})
      this.$refs.TableHeaderList.childMethod();

      this.displayOrders(1, 20);
    },
    //控制运单弹出框显示关闭
    EditFlagShowData(data) {
      this.editflagShow = data;
    },
    //温层搜索
    thermosphereChange(val) {
      this.thermosphereData = val;
      this.displayOrders(1, 20);
    },
    waybillTypeChange(val) {
      this.waybillTypeData = val;
      this.displayOrders(1, 20);
    },
    statusChange(val) {
      this.statusData = val;
      this.displayOrders(1, 20);
    },
    creatorChange() {
      this.displayOrders(1, 20);
    },
    creatortypeChange() {
      this.displayOrders(1, 20);
    },
    fromareaChange() {
      this.displayOrders(1, 20);
    },
    toareaChange() {
      this.displayOrders(1, 20);
    },
    sourcetypeChange() {
      this.displayOrders(1, 20);
    },
    routerChange(val) {
      this.routerDataNum = val;
      this.displayOrders(1, 20);
    },
    customerChange() {
      this.displayOrders(1, 20);
    },
    //获取自定义表头字段
    AddResultFn() {
      let rightData;
      rightData = this.data.filter((item) => this.value.includes(item.key));
      let arritemsdata = rightData.map((element, index) => {
        return {
          id: element.key + "",
          sequence: rightData.length - this.value.indexOf(element.key) + "",
        };
      });

      let dataObj = {
        header_id: this.selectDataId + "",
        items_data: arritemsdata,
      };
      dynamicHeaderCreate(dataObj).then((res) => {
        if (res.code === 10000) {
          this.dynamicHeaderUserListFn();
          this.displayOrders(1, 20);
        }
      });
    },
    //获取模块ID 函数
    dynamicHeaderListFn() {
      const data = {};
      dynamicHeaderList(data).then((res) => {
        if (res.code === 10000) {
          res.data.list.forEach((element) => {
            if (element.name == "order") {
              this.selectDataId = element.id;
              this.displayOrders(1, 20);
              this.dynamicHeaderUserListFn();
            }
          });
        }
      });
    },
    // 用户设定表头字段（显示字段）
    dynamicHeaderUserListFn() {
      let data = {
        header_id: this.selectDataId,
      };
      dynamicHeaderUserList(data).then((res) => {
        if (res.code === 10000) {
          let showData = [];
          let idData = [];
          res.data.select_items == null
            ? []
            : res.data.select_items.forEach((val, index) => {
                showData.push({
                  label: val.title,
                  key: val.id,
                  pinyin: val.title,
                });
              });
          this.data = showData;
          res.data.un_selected_items == null
            ? []
            : res.data.un_selected_items.forEach((val, index) => {
                showData.push({
                  label: val.title,
                  key: val.id,
                  pinyin: val.title,
                });
              });
          this.data = showData;
          res.data.select_items == null
            ? []
            : res.data.select_items.forEach((val, index) => {
                idData.push(val.id);
              });
          this.value = idData;
        }
      });
    },
    //始发网点过滤
    fromnetworkname(val) {
      this.fromnetworknameData = val;
      this.displayOrders(1, 20);
    },
    tonetworkname(val) {
      this.tonetworknameData = val;
      this.displayOrders(1, 20);
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.displayOrders(this.pageNum, this.pageSize, this.obj_list);
    },
    handleCurrentChange(val) {
      // console.log(val, "jfalksdjf");
      this.pageNum = val; //第多少页

      this.displayOrders(this.pageNum, this.pageSize, this.obj_list);
    },
    changeValue(val) {
      let scrollLeft = this.$refs.multipleTable.bodyWrapper.scrollLeft;
      this.displayOrders(1, 20);
      setTimeout(() => {
        this.$refs.multipleTable.bodyWrapper.scrollLeft = scrollLeft;
      }, 30);
    },
    async displayOrders(pageNumval, pageSizeval, exportdataval) {
      this.loading = true;
      pageNumval = this.pageNum;
      pageSizeval = this.pageSize;
      let _this = this;
      setTimeout(() => {
        _this.numberLoding = true;
      }, 50);

      let data = {
        token: getToken("Cookie"),
        header_id: this.selectDataId + "",
        page: pageNumval,
        page_size: pageSizeval,
        create_time: {
          start_time: (this.orderSearch.create_time.start_time + "").slice(
            0,
            10
          ),
          end_time: (this.orderSearch.create_time.end_time + "").slice(0, 10),
        },
        ...exportdataval,
        // ...this.obj_list,
      };
      this.exportdata = data;
      let result = await reqOrderFormData(data);
      this.header_data_list = result.data.list;
      this.HeaderData = result.data.item_list;
      this.Fntransformation(this.HeaderData);
      if (result.code === 10000 && result.data.list !== null) {
        // 动态添加数据
        this.loading = false;
        var list = result.data.list;
        this.orderListval = result.data.total_data_num;
        for (var i = 0; i < list.length; i++) {
          list[i]["isCheck"] = false;
        }
        this.orderlist = list;
        this.orderlist.unshift({});
        this.pageNum = result.data.page;
        this.totalListNum = result.data.total;
        this.pageSize = result.data.page_size;
      } else {
        this.loading = false;
        this.orderlist = [{}];
        this.header_data_list = [{}];
        this.pageNum = 1;
        this.totalListNum = 0;
        this.pageSize = 20;
      }
      // this.$nextTick(() => {
      //   this.$refs.multipleTable.clearSelection();
      //   this.$refs.multipleTable.doLayout();
      // });
    },
    objheader(obj) {
      var data = {
        token: getToken("Cookie"),
        header_id: this.selectDataId + "",
        ...obj,
      };
      this.obj_list = { ...obj };
      this.exportdata = obj;
      reqOrderFormData(data).then((res) => {
        this.header_data_list = res.data.list;
        if (res.code === 10000 && res.data.list !== null) {
          this.header_data_list.unshift({});
          this.orderlist = this.header_data_list;
          this.pageNum = res.data.page;
          this.totalListNum = res.data.total;
          this.pageSize = res.data.page_size;
        } else {
          this.header_data_list = [{}];
          this.pageNum = 1;
          this.totalListNum = 0;
          this.pageSize = 20;
        }
      });
    },
    handleDeleteType(value, val) {
      // console.log(val, "DS2304090161");
      this.orderIdNums = value;
      this.handleSelectionChange(val);
    },
    closeOtherOrderInfo() {
      //关闭工具页的函数
      this.showOtherOrderInfo = false;
    },
    async getThermosphereType() {
      let result1 = await dictionaryBatch({
        codes: [
          "thermosphere",
          "pay_way",
          "cost",
          "delivery_method",
          "transport_way",
          "Package_model",
          "pay_way",
        ],
      });
      let result2 = await getTransportsList({ is_all: false });
      this.transportsType = result2.data.data;
      this.payMethods = result1.data.list.pay_way;
      this.ThermosphereType = result1.data.list.thermosphere;
      this.costList = result1.data.list.cost.reverse().slice(0, 10);
      this.deliveryMethodsList = result1.data.list.delivery_method;
      this.package_typeList = result1.data.list.Package_model;
      this.transportsWayList = result1.data.list.transport_way;
      this.paymentMethodsList = result1.data.list.pay_way;
    },
    async getHandlersList() {
      let result = await reqHandlersList({ branch_id: "1" });
      this.Handlers = result.data;
      this.formData.Handler = JSON.parse(localStorage.getItem("user")).user_id;
      let piece = this.Handlers.find(
        (item) => item.id == this.formData.Handler
      );
      if (piece) {
        this.formData.handler_name = piece.nickname;
      }
    },
    selectHandler(val) {
      let piece = this.Handlers.find((item) => item.id == val);
      if (piece) {
        this.formData.handler_name = piece.nickname;
      }
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].show_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    async getWebsiteList() {
      let result = await reqWebsiteList({ branch_type: "0" });
      this.websiteList = result.data || [];
    },
    async getAreaList() {
      let result = await reqWebsiteList({ branch_type: "1" });
      this.areaType = result.data || [];
    },
    selectedWebsite(id) {
      if (id != "" || id != null || id != undefined) {
        let dataId = id[id.length - 1];
        //选择出发网点
        let piece = this.websiteListDQ.find((item) => item.id == dataId);
        this.formData.departure = piece.name;
      }
    },
    selectedWebsite2(id) {
      if (id != "" || id != null || id != undefined) {
        let dataIdTwo = id[id.length - 1];
        //选择目的网点
        let piece = this.websiteListDQ.find((item) => item.id == dataIdTwo);
        this.formData.destination_network = piece.name;
      }
    },
    selectedWebsitevalue01(id) {
      var name = getParentIds(id, this.organizationBoxData).concat(
        this.selectedDetail.from_network_id
      );
      this.formData.departure_id = name;
    },
    selectedWebsitevalue02(id) {
      var name = getParentIds(id, this.organizationBoxData).concat(
        this.selectedDetail.to_network_id
      );
      this.formData.destination_network_id = name;
    },
    searchRouterList(query) {
      //获取路由
      if (query !== "") {
        setTimeout(async () => {
          let { router, router_id } = this.formData;
          let result = await getRouterList({
            router_id,
            router,
          });
          this.routerList = result.data;
        }, 200);
      } else {
        this.routerList = [];
      }
    },
    selectedRouter(id) {
      //选择路由
      this.formData.router = this.routerList.find((item) => item.id == id).name;
    },
    searchShipperList(query) {
      this.formData.sender.name = query;
      //获取发货人
      if (query !== "") {
        setTimeout(async () => {
          let result = await getConsignorList({
            branch_id: 1,
            name: query,
            mobile: "",
          });
          this.shipperList = result.data;
        }, 200);
      } else {
        this.shipperList = [];
      }
    },
    searchConsigneeList(query) {
      this.formData.receiver.name = query;
      //获取收货人
      if (query !== "") {
        setTimeout(async () => {
          let result = await ConsigneeInterface({
            branch_id: 1,
            name: query,
            mobile: "",
          });
          this.consigneeList = result.data;
        }, 200);
      } else {
        this.consigneeList = [];
      }
    },
    selectedConsignor(id) {
      //选择发货人
      if (id) {
        let piece = this.shipperList.find((item) => item.id == id);
        if (piece != undefined) {
          this.formData.sender.name = piece.name;
          this.formData.sender.phone = piece.mobile;
          this.formData.sender.id = piece.id;
          this.formData.sender.company = piece.customer_name;
          this.formData.sender.company_id = piece.customer_id;
          this.formData.sender_pcd = [
            piece.province_id,
            piece.city_id,
            piece.district_id,
          ];
          this.formData.sender.address = piece.address;
          if (piece.province_id && piece.city_id) {
            this.formData.departure_station_name = this.addresssequence
              .find((item) => item.id === piece.province_id)
              .next_level_data.find((item) => item.id === piece.city_id).name;
          }
        } else {
          this.formData.sender.id = "";
          this.formData.sender.company_id = "";
        }
      }
    },
    // 发货人选中的数据
    sender_selected_data(event) {
      var receiver_value = event.target.value;
      let receiver_name = this.shipperList.find(
        (item) => item.name == receiver_value
      );
      if (receiver_name == undefined) {
        this.formData.sender.company_id = "";
      } else {
        this.formData.sender.company_id = this.formData.sender.company_id;
      }
    },
    selectedConsignee(id) {
      //选择收货人
      if (id) {
        let piece = this.consigneeList.find((item) => item.id == id);
        if (piece != undefined) {
          this.formData.receiver.name = piece.name;
          this.formData.receiver.phone = piece.mobile;
          this.formData.receiver.id = piece.id;
          this.formData.receiver.company = piece.customer_name;
          this.formData.receiver.company_id = piece.customer_id;
          this.formData.receiver_pcd = [
            piece.province_id,
            piece.city_id,
            piece.district_id,
          ];
          this.formData.receiver.address = piece.address;
          if (piece.province_id && piece.city_id) {
            this.formData.at_station_name = this.addresssequence
              .find((item) => item.id === piece.province_id)
              .next_level_data.find((item) => item.id === piece.city_id).name;
          }
        } else {
          this.formData.receiver.id = "";
          this.formData.receiver.company_id = "";
        }
      }
    },
    // 收货人选中的数据
    receiver_selected_data(event) {
      var receiver_value = event.target.value;
      let receiver_name = this.consigneeList.find(
        (item) => item.name == receiver_value
      );
      if (receiver_name == undefined) {
        this.formData.receiver.company_id = "";
      } else {
        this.formData.receiver.company_id = this.formData.receiver.company_id;
      }
    },
    // 如果发现没有发货人清空id和发货公司id
    sender_customer_id() {
      var sender_name = this.formData.sender.name;
      let piece_value = this.shipperList.find(
        (item) => item.name == sender_name
      );
      if (piece_value == undefined) {
        this.formData.sender.customer_id = "";
        this.formData.sender.id = "";
      } else {
      }
    },
    // 如果发现没有收货人清空id和收货公司id
    receiver_customer_id() {
      var receiver_name = this.formData.receiver.name;
      let piece_value = this.consigneeList.find(
        (item) => item.name == receiver_name
      );
      if (piece_value == undefined) {
        this.formData.receiver.customer_id = "";
        this.formData.receiver.id = "";
      } else {
      }
    },
    selectTransportsType(val) {
      //选择承运产品类型之后
      this.formData.ThermosphereName = this.transportsType.find(
        (item) => item.id === val
      ).name;
      this.is_incubator = this.transportsType.find(
        (item) => item.id === val
      ).is_incubator;
      if (this.is_incubator === "0") {
        this.formData.Thermosphere = "8";
      } else {
        this.formData.Thermosphere = "";
      }
    },
    autoUpdateFee(val) {
      for (var item in this.formData.payment) {
        if (item !== "payment_method") {
          this.formData.payment[item] = "";
        }
      }
      this.formData.payment[val] = String(this.totalFreight);
    },

    handleCloseClick() {
      this.editflagShow = false;
    },
    orderclose() {
      this.editflagShow = false;

      this.formData.expense = {};
    },

    //添加一行货物信息
    addShiper() {
      this.goodsArray.push({
        name: "",
        packing: "", //包装
        package_quantity: "", //包装数量
        goods_no: "", //编号
        number: "", //件数
        weight: "", //重量
        volume: "", //体积
        price: "", //价格
        declared_value: "", //价值
        thermosphere: "", //温层
        package_type: "", //保温箱型号
      });
    },
    reduce() {
      // 通过索引删除InForMationList数组中的元素
      // 因为如果不保留唯一一条数据的话再次渲染dom的时候是无法获取数据的
      if (this.goodsArray.length > 1) {
        this.goodsArray.splice(1, 1);
      } else {
        this.$message({
          message: "这是最后一条数据",
          type: "warning",
        });
      }
    },
    //单独打印
    async openPrintLabel() {
      if (this.orderIdNums.length === 1) {
        let id = this.orderIdNums[0] + "";
        let result = await order_details({ id });
        this.selectedDetail = result.data;
        this.selectedDetail.goods.forEach((item) => {
          this.goods_weight += item.weight / 1;
        });
        this.selectedDetail.goods.forEach((item) => {
          this.goods_size += item.volume / 1;
        });
        // this.selectedDetail.goods.forEach((item) => {
        //   this.commodity_number += item.number / 1;
        // });
        let result1 = await dictionaryBatch({
          codes: ["transport_way", "thermosphere"],
        });
        if (this.selectedDetail.waybill_product_type_name === "保温箱") {
          let idData = this.selectedDetail.goods[0].thermosphere;
          this.thermosphereData = result1.data.list.thermosphere.find(
            (item) => {
              return item.item_code === idData;
            }
          ).item_name;
        } else if (
          this.selectedDetail.waybill_product_type_name === "常温零担"
        ) {
          this.thermosphereData = "";
        } else if (
          this.selectedDetail.waybill_product_type_name === "常温整车"
        ) {
          this.thermosphereData = "";
        } else if (
          this.selectedDetail.waybill_product_type_name === "冷链零担"
        ) {
          let idData = this.selectedDetail.thermosphere;
          this.thermosphereData = result1.data.list.thermosphere.find(
            (item) => {
              return item.item_code === idData;
            }
          ).item_name;
        } else if (
          this.selectedDetail.waybill_product_type_name === "冷链整车"
        ) {
          let idData = this.selectedDetail.thermosphere;
          this.thermosphereData = result1.data.list.thermosphere.find(
            (item) => {
              return item.item_code === idData;
            }
          ).item_name;
        } else {
          this.thermosphereData = "";
        }
        this.transportsWayList = result1.data.list.transport_way;
        if (this.selectedDetail.transport_way) {
          this.transportsWay = this.transportsWayList.find(
            (item) => item.item_code == this.selectedDetail.transport_way
          ).item_name;
        }
        setTimeout(() => {
          jsbarcode(
            "#canvas",
            this.selectedDetail.waybill_number
              ? this.selectedDetail.waybill_number
              : this.selectedDetail.order_no,
            {
              lineColor: "#000",
              width: 2.5,
              height: 40,
              displayValue: false,
            }
          );
        }, 400);
        this.dialogLabelVisible = true;
      } else if (this.orderIdNums.length > 1) {
        this.$message({
          type: "warning",
          message: "只能同时打印一个运单",
        });
      } else {
        this.$message({
          type: "warning",
          message: "至少选择一个运单",
        });
      }
    },
    toPrintReceipt() {
      setTimeout(() => {
        this.numberItem++;
      }, 800);
    },
    toPrintFace() {
      this.toPrint = false;
    },
    async openFaceReceipt() {
      if (this.orderIdNums.length === 1) {
        let id = this.orderIdNums[0] + "";
        let result2 = await dictionaryBatch({
          codes: ["Package_model"],
        });
        this.Package_model_list = result2.data.list.Package_model;
        let result = await order_details({ id });
        this.selectedDetail = result.data;
        this.isIncubator =
          this.selectedDetail.waybill_product_business_type === "1";
        this.is_payment_method = this.selectedDetail.payment_id === "4";
        this.selectedDetail.goods.forEach((item) => {
          this.goodsName = this.goodsName + item.name + ", ";
        });
        setTimeout(() => {
          jsbarcode(
            "#canvasFaceReceipt",
            this.selectedDetail.waybill_number
              ? this.selectedDetail.waybill_number
              : this.selectedDetail.order_no,
            {
              lineColor: "#000",
              width: 1,
              height: 60,
              displayValue: false,
            }
          );
        }, 400);
        this.dialogVisibleFaceFn = true;
      } else if (this.orderIdNums.length > 1) {
        this.$message({
          type: "warning",
          message: "只能同时打印一个运单",
        });
      } else {
        this.$message({
          type: "warning",
          message: "至少选择一个运单",
        });
      }
    },
    printJYJ() {
      this.printType = true;
      this.openFaceReceipt();
    },
    handleClose() {
      this.dialogLabelVisible = false;
    },
    handleCloseFace() {
      this.dialogVisibleFaceFn = false;
    },
    selectable(row, index) {
      if (index === 0) {
        return false;
      } else {
        return true;
      }
    },
    selectedCustomer(id) {
      //选择客户
      this.orderSearch.customer_id = this.clientList.find(
        (item) => item.id == id
      ).id;
    },
    handleExport() {
      this.loadingfalse = true;
      var data = {
        order_id_list: this.orderIdNums,
        order_no: this.orderSearch.orderNum,
        status_list: this.orderSearch.outlets,
        create_time: {
          start_time: (this.orderSearch.create_time.start_time + "").slice(
            0,
            10
          ),
          end_time: (this.orderSearch.create_time.end_time + "").slice(0, 10),
        },
        sender_name: this.orderSearch.sender_name,
        sender_phone: this.orderSearch.sender_phone,
        sender_city_id:
          this.orderSearch.sender_city_id[1] == "undefined"
            ? 0
            : this.orderSearch.sender_city_id[1],
        sender_company: this.orderSearch.sender_company,
        receiver_name: this.orderSearch.receiver_name,
        receiver_phone: this.orderSearch.receiver_phone,
        receiver_city_id:
          this.orderSearch.receiver_city_id[1] == "undefined"
            ? 0
            : this.orderSearch.receiver_city_id[1],
        receiver_company: this.orderSearch.receiver_company,
        to_network_id: this.orderSearch.to_network_id + "",
        waybill_no_list: this.orderSearch.waybill_no_list + "", //运单号
        waybill_product_type: this.orderSearch.waybill_product_type + "", //承运类型
        from_region_name: this.orderSearch.from_region_name + "", //发站
        to_region_name: this.orderSearch.to_region_name + "", //到站
        customer_id: this.orderSearch.customer_id + "", //所属客户
        creator_id:
          this.orderSearch.creator_id == ""
            ? "0"
            : this.orderSearch.creator_id + "", //创建人
      };
      reqExportNotice(data).then((res) => {
        if (res.code === 10000) {
          this.reqUrl = "https://" + res.data.loaded_url;
          window.open(this.reqUrl);
          this.loadingfalse = false;
        }
      });
    },
    // 监听承运类型计算匹配规则
    watchwaybill(newname, oldName) {
      this.pageaccountingrules(1, "val");
    },
    // 监听所属客户来计算匹配规则
    watchcustomer(newname, oldName) {
      this.pageaccountingrules(1, "val");
    },
    // 计费规则接口
    pageaccountingrules(type, val) {
      if (
        this.formData.waybill_product_type != "" &&
        this.formData.customer_id != ""
      ) {
        let goods_list_string = goodsArray.map((item2) => {
          let item = { ...item2 };
          item.package_quantity = String(item.package_quantity);
          item.frozen_box_number = String(item.frozen_box_number);
          item.weight = String(item.weight);
          item.volume = String(item.volume);
          item.price = String(item.price);
          item.declared_value = String(item.declared_value);
          item.number = String(item.number);
          item.thermosphere = String(item.thermosphere);
          item.package_type = String(item.package_type);
          return item;
        });
        // 计费规则调用
        var param = {
          node: "9", // 当前节点
          transport_type_id: this.formData.waybill_product_type + "", // 承运类型
          start_area_info: {
            address: this.formData.sender.address,
            province_id: this.formData.sender_pcd[0], // 省id
            city_id: this.formData.sender_pcd[1], // 市id
          }, // 出发区域信息
          end_area_info: {
            address: this.formData.receiver.address,
            province_id: this.formData.receiver_pcd[0], // 省id
            city_id: this.formData.receiver_pcd[1], // 市id
          }, // 到达区域信息
          customer_id: this.formData.customer_id + "", // 客户id
          carrier_id: "", // 承运商id
          goods_list: goods_list_string,
        };
        setTimeout(async () => {
          let result = await accountingrules(param);
          let datalist = JSON.parse(JSON.stringify(result.data));
          if (type == 1) {
            this.goodsArray = datalist;
            this.disposerule(datalist);
          } else if (type == 2) {
            if (datalist[val.$index].rule_cost_info.length == 1) {
              this.goodsArray.splice(val.$index, 1, datalist[val.$index]);
              this.$set(
                this.goodsArray[val.$index],
                "rule_cost_info_id",
                datalist[val.$index].rule_cost_info[0].rule_id
              );
              this.rulechange(
                val,
                datalist[val.$index].rule_cost_info,
                datalist[val.$index].rule_cost_info[0].rule_id
              );
            } else {
              this.goodsArray.splice(val.$index, 1, datalist[val.$index]);
            }
          }
        }, 200);
      }
    },
    // 货物改变
    accopNumber(type, val) {
      this.pageaccountingrules(type, val);
    },
    rulechange(valrow, valuepice, value) {
      if (value != "") {
        var piceList = {};
        valuepice.forEach((element) => {
          if (element.rule_id == value) {
            piceList = element;
          }
        });
        this.goodsArray[valrow.$index].price = piceList.cost + "";
        this.AllShowprice();
      } else {
        this.goodsArray[valrow.$index].price = 0 + "";
        this.AllShowprice();
      }
    },
    // 最后的运费价格
    AllShowprice() {
      var allpice = 0;
      for (var i = 0; i < this.goodsArray.length; i++) {
        allpice = allpice + this.goodsArray[i].price * 1;
      }
      this.$set(this.formData.expense, 1, parseFloat(allpice).toFixed(2));
    },
    disposerule(value) {
      for (let index = 0; index < value.length; index++) {
        if (value[index].rule_cost_info.length == 1) {
          this.$set(
            this.goodsArray[index],
            "rule_cost_info_id",
            value[index].rule_cost_info[0].rule_id
          );
        } else {
          this.$set(this.goodsArray[index], "rule_cost_info_id", "");
        }
      }
    },
    allorderClose() {
      this.statusShowType = false;
    },
    submitForm() {
      this.displayOrders(1, 20);
    },
    titleFocus() {
      this.collClick = this.$refs.coll.setActiveNames;
      this.$refs.coll.setActiveNames = () => {};
    },
    titleBlur() {
      this.$refs.coll.setActiveNames = this.collClick;
    },
  },
};
</script>

<style scoped lang="less">
/deep/.actions .left {
  display: block !important;
}
/deep/.actions .addList,
/deep/.actions .release,
/deep/.actions .revoke,
/deep/.actions .OKready,
/deep/.actions .Delete,
/deep/.actions .zuofei,
/deep/.actions .clearZF,
/deep/.actions .clearSL,
/deep/.actions .print,
/deep/.actions .printfacesheet,
/deep/.actions .printWd {
  display: none !important;
}

/deep/.qianzhi_content .el-checkbox__label {
  color: #000 !important;
}

/* /deep/.el-dialog__body {
  padding: 0px !important;
}

/deep/.el-dialog__header {
  display: none !important;
} */
/deep/.el-table td.el-table__cell .el-tooltip div span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/.el-table th.gutter {
  display: initial;
}
.qianzhi_content {
  width: 475px;
  height: 460px;
  overflow: hidden;
  border: 1px dashed #000;

  .qianzhi_top {
    height: 50px;
    overflow: hidden;
    border-bottom: 1px dashed #000;

    .top_left {
      font-size: 24px;
      color: #000;
      float: left;
      font-weight: bold;
      line-height: 45px;
      padding-left: 10px;

      img {
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 10px;
      }
    }

    .top_right {
      float: right;
      text-align: center;
      margin-right: 30px;
      margin-top: 3px;

      span {
        font-size: 18px;
        font-weight: bold;
        display: block;
      }

      i {
        font-size: 12px;
        margin-top: -3px;
        display: block;
      }
    }
  }

  .qianzhi_tm {
    height: 80px;
    border-bottom: 1px dashed #000;

    img {
      width: 493px;
      height: 80px;
    }
  }

  .qianzhi_address {
    height: 30px;
    overflow: hidden;
    border-bottom: 1px dashed #000;

    span {
      display: block;
      float: left;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
    }

    .span1 {
      width: 90px;
      text-align: center;
      display: block;
      border-right: 1px dashed #000;
    }
  }

  .qianzhi_sjr {
    height: 100px;
    overflow: hidden;
    border-bottom: 1px dashed #000;

    span {
      display: block;
      float: left;

      i {
        display: block;
        line-height: 25px;
        padding-left: 5px;
        width: 390px;
        word-wrap: break-word;
        word-break: normal;
      }
    }

    .span2 {
      width: 26px;
      padding: 21px 22px 22px 47px;
      border-right: 1px dashed #000;
    }
  }

  .shangj_code {
    height: 30px;
    overflow: hidden;
    border-bottom: 1px dashed #000;

    span {
      display: block;
      float: left;
      height: 30px;
      line-height: 30px;
      padding-left: 25px;
      margin-right: 10px;
    }

    .span1 {
      width: 208px;
      text-align: left;
      display: block;
      border-right: 1px dashed #000;
    }
  }

  .qianzhi_detail {
    min-height: 200px;

    .detail_left {
      width: 49%;
      float: left;
      display: block;
      min-height: 200px;
      border-right: 1px dashed #000;

      span {
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 25px;
      }
    }

    .detail_right {
      width: 50.5%;
      float: left;
      display: block;
      min-height: 200px;

      span {
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
      }

      .detail_c {
        overflow: hidden;

        div {
          width: 100%;
          height: 33px;
          line-height: 33px;
          border-bottom: 1px dashed #000;

          span {
            display: block;
            float: left;
            width: 28%;
            text-align: center;
            height: 20px;
            line-height: 20px;
          }

          font {
            display: block;
            float: left;
            padding-left: 5px;
          }

          i {
            display: block;
            float: left;
          }
        }
      }
    }
  }
}

.facesheetContainer {
  width: 910px;
  // height: 100%;
  background-color: #fd7c45;

  div,
  span {
    font-family: "SimSun";
    font-size: 12px;
  }
  .facesheetLine1 {
    height: 29px;
    padding-top: 20px;
    margin-left: 50px;
    .line1_left {
      float: left;
      margin-top: -15px;
      .title {
        color: white;
        // margin: 5px 0;
        margin-left: 225px;
        .editTitle {
          overflow: hidden;
        }
        div {
          font-size: 27px;
        }
      }
      .exception {
        font-size: 10px;
        -webkit-transform: scale(0.9);
        margin-left: -5px;
      }
    }
    .line1_right {
      overflow: hidden;
      float: right;
      width: 218px;
      height: 55px;
      margin-top: -20px;
      background-color: #fff;
      .label1 {
        box-sizing: border-box;
        width: 37px;
        height: 57px;
        line-height: 20px;
        padding: 5px 12px;
        padding-right: 0px;
        font-size: 14px;
        display: inline-block;
      }
      .qrcode {
        float: right;
        .waybillCode {
          margin-left: 10px;
          margin-top: -3px;
          font-size: 16px;
          letter-spacing: 1.5px;
        }
      }
    }
  }
  .facesheetLine2 {
    margin-left: 50px;
    margin-top: 3px;
    height: 110px;
    .line2_left {
      float: left;
      width: 421px;
      height: 110px;
      background-color: #fff;
      .singleInfo {
        margin: 8px 12px;
      }
    }
    .line2_right {
      float: right;
      width: 426px;
      height: 110px;
      background-color: #fff;
      .singleInfo {
        margin: 8px 10px;
      }
    }
  }
  .facesheetLine3 {
    margin-left: 50px;
    margin-top: 5px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    .line3_left {
      width: 288px;
      height: 100px;
      background-color: #fff;
      .infoLabel {
        font-size: 14px;
        font-weight: bold;
        display: block;
        margin: 3px 18px;
      }
      .singleInfo {
        margin: 6px 30px;
        margin-right: 5px;
        display: inline-block;
        width: 100px;
      }
    }
    .line3_center {
      width: 294px;
      height: 100px;
      background-color: #fff;
      .infoLabel {
        font-size: 14px;
        display: inline-block;
        font-weight: bold;
        margin: 2px 10px;
      }
      .singleInfo {
        margin: 6px 10px;
        input {
          width: 47px;
          margin-left: 15px;
        }
      }
    }
    .line3_right {
      width: 250px;
      height: 100px;
      background-color: #fff;
      .infoLabel {
        font-size: 14px;
        font-weight: bold;
        display: block;
        margin: 3px 10px;
      }
      .singleInfo {
        margin: 6px 10px;
        display: inline-block;
        width: 100px;
      }
    }
  }
  .facesheetLine4 {
    margin-left: 50px;
    margin-top: 8px;
    height: 110px;
    display: flex;
    justify-content: space-between;
    .line4_left {
      width: 203px;
      height: 110px;
      background-color: #fff;
      .singleInfo {
        margin: 7px 30px;
      }
    }
    .line4_center {
      width: 204px;
      height: 110px;
      background-color: #fff;
      .infoLabel {
        font-size: 14px;
        font-weight: bold;
        display: block;
        margin: 7px 10px;
      }
      .singleInfo {
        margin: 4px 10px;
        display: inline-block;
        width: 76px;
      }
    }
    .line4_right {
      width: 425px;
      height: 110px;
      background-color: #fff;
      .infoLabel {
        font-size: 14px;
        font-weight: bold;
        display: block;
        margin: 4px 15px;
      }
      .infoArea {
        display: inline-block;
        width: 40%;
        .infoTitle {
          display: inline-block;
          margin-left: 55px;
          margin-top: 30px;
        }
        .singleInfo {
          margin: 7px 15px;
        }
      }
    }
  }
  .facesheetLine5 {
    margin-left: 50px;
    margin-top: 8px;
    height: 93px;
    .line5 {
      float: left;
      width: 425px;
      height: 93px;
      background-color: #fff;
      .infoLabel {
        font-size: 14px;
        font-weight: bold;
        display: block;
        margin: 4px 10px;
      }
      .singleInfo {
        margin: 17px 10px;
      }
    }
  }
  .facesheetLine6 {
    margin-left: 50px;
    margin-top: 8px;
    height: 81px;
    display: flex;
    justify-content: space-between;
    .line6_left1 {
      width: 210px;
      height: 81px;
      background-color: #fff;
      .singleInfo {
        margin: 10px 10px;
      }
    }
    .line6_left2 {
      width: 202px;
      height: 81px;
      background-color: #fff;
      .singleInfo {
        margin: 10px 10px;
      }
    }
    .line6_right1 {
      width: 210px;
      height: 81px;
      background-color: #fff;
      .singleInfo {
        margin: 10px 10px;
      }
    }
    .line6_right2 {
      width: 202px;
      height: 81px;
      background-color: #fff;
      .singleInfo {
        margin: 10px 10px;
      }
    }
  }
}

.typeEnter {
  overflow: hidden;
  width: 300px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  -webkit-line-clamp: 2; //折两行后显示'...'
  overflow: hidden;
}
.allOrderContainer {
  /* padding: 10px 15px;
  background-color: #fff;
  margin: 5px 0px 0px 0px; */
  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
    /* padding: 5px 0; */
    .actions_button {
      display: flex;
      flex-wrap: wrap;
    }
    .actions_right {
      ::v-deep .el-pagination {
        display: inline-block;
        .el-input--mini .el-input__inner {
          height: 24px;
        }
      }
    }
  }

  .footerbox {
    font-size: 12px;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    background-color: #e9e9e9;
    width: 100%;
    height: 30px;
    line-height: 30px;
    z-index: 22;
    text-align: left;
    margin-left: -5px;
    padding-left: 10px;
  }
}
.statistics-warning-row {
  background: #e9e9e9 !important;
}
/deep/.el-dialog {
  margin-top: 8vh !important;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #e69850 !important;
}
/deep/.el-checkbox__label {
  font-size: 12px !important;
  // color: #fff;
}
/deep/.el-checkbox {
  margin-right: 20px !important;
}

/deep/ .el-drawer__header {
  background: #eee !important;
  border-bottom: 1px solid #ccc !important;
  padding: 10px 20px 10px 20px !important;
}
/deep/ .select_right .el-select {
  float: right;
  width: 87px;
  padding-top: 8px;
}
/deep/ .el-drawer__header {
  margin-bottom: 12px !important;
}
/deep/ .four_w_select .el-select {
  width: 40% !important;
}
/deep/ .waybill_item_yuns .el-select {
  width: 130px !important;
}
// /deep/ .warbill_w .el-select {
//   width: 38% !important;
//   float: left !important;
// }
.orderSearch {
  ::v-deep .el-collapse {
    border-top: none;
    border-bottom: none;
  }
}
.orderSearch_header {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .orderSearch_header_content {
    min-width: 296px;
  }
  .orderSearch_header_type {
    min-width: 264px;
  }
  .orderSearch_header_time {
    min-width: 384px;
  }
  .orderSearch_header_button {
    min-width: 169px;
  }
}
.classadd {
  font-size: 30px;
}
.shareContainer {
  .waybill_content {
    width: 98%;
    font-size: 14px;
    margin: 0 auto;
    .waybill_title {
      height: 40px;
      .waybill_left {
        float: left;
        width: 30%;
      }
      .waybill_time {
        float: right;
      }
    }
    .article {
      border: 1px solid #e69850;
      .waybill_top {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #e69850;
        .waybill_item {
          width: 342px;
          line-height: 54px;
          padding: 0px 0px 0px 24px;
          .order-number-input {
            margin-left: 5px;
            background-color: transparent !important;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #d5d5d5;
            font-size: 13px;
            width: 200px;
            margin-top: 5px;
            height: 30px;
          }
        }
      }
      .waybill_mid {
        width: 100%;
        display: flex;
        .left_title_r {
          padding: 0px 0px 0px 30px;
        }
        .waybill_mid_left {
          width: 50%;
          display: flex;
          .left_title_l {
            width: 91px;
            background: #e69850;
            text-align: center;
            span {
              display: block;
              color: #fff;
            }
            .icon {
              padding-top: 61px;
              font-size: 34px;
            }
          }
          .left_title_shipper {
            line-height: 54px;
            // span {
            //   display: inline-block;
            //   width: 80px;
            // }
            .order-number-input {
              background-color: transparent !important;
              border-radius: 2px;
              border: none;
              border-bottom: 1px solid #d5d5d5;
              font-size: 13px;
              width: 200px;
              margin-top: 5px;
              height: 30px;
            }
          }
        }
        .waybill_mid_right {
          width: 50%;
          display: flex;
          .right_title_r {
            padding: 0px 0px 0px 30px;
          }
          .right_title_l {
            width: 91px;
            background: #e69850;
            text-align: center;
            span {
              display: block;
              color: #fff;
            }
            .icon {
              padding-top: 61px;
              font-size: 34px;
            }
          }
          .left_title_shipper {
            line-height: 54px;
            // span {
            //   display: inline-block;
            //   width: 80px;
            // }
            .order-number-input {
              background-color: transparent !important;
              border-radius: 2px;
              border: none;
              border-bottom: 1px solid #d5d5d5;
              font-size: 13px;
              width: 200px;
              margin-top: 5px;
              height: 30px;
            }
          }
        }
      }
      // 货物信息
      .order-information {
        margin-top: 5px;
        .order-shiper-img {
          width: 100%;
          line-height: 34px;
          border-bottom: 1px solid black;
          span {
            margin: 20px 10px;
          }
        }
        .total_left_title {
          width: 100%;
          height: 40px;
          background: #e69850;
          span {
            display: block;
            width: 100px;
            float: left;
            i {
              width: 4px;
              height: 28px;
              background: #fff;
              display: block;
              margin-left: 10px;
              margin-top: 5px;
              float: left;
              margin-right: 5px;
              border-radius: 1px 1px;
            }
            b {
              line-height: 40px;
              color: #fff;
              font-weight: 500;
            }
          }
          i {
            line-height: 40px;
            color: #fff;
          }
        }
        .order-shiper-warp {
          .goods-info-table {
            width: 100%;
            border: 1px solid black;
            height: 30px;
            text-align: center;
            border-collapse: collapse;

            tr {
              // border: 1px solid black;
              td {
                width: 30px;
                border: 1px solid black;
              }
            }
          }

          .remodername .number {
            height: 20px;
            display: block;
          }

          .remodername:hover .number {
            display: none;
          }

          .remodername .remodercenter {
            display: none;
            color: #ff0000;
          }

          .remodername:hover .remodercenter {
            height: 20px;
            display: block;
            color: #ff0000;
          }
        }
      }
      .waybill_bot {
        border: 1px solid #e69850;
        min-height: 42px;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        .waybill_border {
          width: 100%;
          min-height: 42px;
          overflow: hidden;
          .waybill_item {
            float: left;
            // width: 15%;
            height: 42px;

            .select_right {
              width: 87px;
              float: left;
            }
            .order-number-name {
              line-height: 42px;
              // padding-left: 5px;
              float: left;
            }
            .order-number-input {
              width: 122px;
              border-bottom: 1px solid #d5d5d5;
              float: left;
              margin-top: 5px;
              height: 30px;
            }
            .order-number-input_moeny {
              width: px;
              border-bottom: 1px solid #d5d5d5;
              float: left;
              margin-top: 5px;
              height: 30px;
            }
          }
          .warbill_num {
            border-right: none;
          }
        }
      }
      .waybill_total {
        width: 100%;

        .total_left {
          width: 100%;
          border-right: 1px solid #e69850;
          .total_left_title {
            width: 100%;
            height: 40px;
            background: #e69850;
            span {
              display: block;
              width: 100px;
              float: left;
              i {
                width: 4px;
                height: 28px;
                background: #fff;
                display: block;
                margin-left: 10px;
                margin-top: 5px;
                float: left;
                margin-right: 5px;
                border-radius: 1px 1px;
              }
              b {
                line-height: 40px;
                color: #fff;
                font-weight: 500;
              }
            }
            i {
              line-height: 40px;
              color: #fff;
            }
          }
          .total_left_content_s {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            border-bottom: 1px solid #e69850;
            .total_left_content {
              padding: 0px 0px 0px 24px;
              width: 270px;
              line-height: 54px;
              display: flex;

              .order-number-name {
                // line-height: 42px;
                padding-left: 5px;
                float: left;
                text-align: right;
              }
              .order-number-input {
                width: 65px;
                border-bottom: 1px solid #d5d5d5;
                float: left;
                margin-top: 5px;
                height: 30px;
              }
              .order-number-input_moeny {
                width: 130px;
                border-bottom: 1px solid #d5d5d5;
                float: left;
                margin-top: 5px;
                height: 30px;
              }
            }
          }
        }
      }
      .payment_method_class {
        display: flex;
        border: 1px solid #e69850;
        border-left: none;
        border-right: none;
        // border-bottom: none;
        .total_mid {
          width: 100%;
          // background: red;
          .total_left_title {
            width: 100%;
            height: 40px;
            background: #e69850;
            span {
              display: block;
              width: 90px;
              float: left;
              i {
                width: 4px;
                height: 28px;
                background: #fff;
                display: block;
                margin-left: 10px;
                margin-top: 5px;
                float: left;
                margin-right: 5px;
                border-radius: 1px 1px;
              }
              b {
                line-height: 40px;
                color: #fff;
                font-weight: 500;
              }
            }
          }
          .total_left_content {
            display: flex;
            flex-wrap: wrap;
            // border-right: 1px solid #e69850;
            .four_w {
              width: 249px;
              line-height: 54px;
              padding: 0px 0px 0px 24px;
              .order-number-input {
                width: 65px;
                // border-bottom: 1px solid #d5d5d5;
                margin-top: 5px;
                height: 30px;
              }
              .order-number-input_moeny {
                width: 130px;
                border-bottom: 1px solid #d5d5d5;
                margin-top: 5px;
                height: 30px;
              }
            }
          }
        }
        .total_right {
          width: 26%;
          .total_left_title {
            width: 100%;
            height: 40px;
            background: #e69850;
            span {
              display: block;
              width: 90px;
              float: left;
              i {
                width: 4px;
                height: 28px;
                background: #fff;
                display: block;
                margin-left: 10px;
                margin-top: 5px;
                float: left;
                margin-right: 5px;
                border-radius: 1px 1px;
              }
              b {
                line-height: 40px;
                color: #fff;
                font-weight: 500;
              }
            }
          }
          .total_right_content {
            width: 100%;
            border-left: 1px solid #e69850;
            .total_rigth_content_r {
              width: 227px;
              line-height: 57px;
              padding: 0px 0px 0px 24px;
              .order-number-name {
                text-align: right;
              }
              .order-number-input_moeny {
                border-bottom: 1px solid #d5d5d5;
                margin-top: 5px;
              }
            }
          }
        }
      }
      .waybill_message {
        width: 100%;
        display: flex;
        .waybill_item {
          width: 20%;
          border-right: 1px solid #e69850;
          line-height: 54px;
          padding: 0px 0px 0px 20px;
          display: flex;
          .order-number-name {
            font-size: 13px;
            // padding-left: 10px;
          }
          .order-number-input_d {
            margin-left: 5px;
            // background-color: transparent !important;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #d5d5d5;
            font-size: 13px;
            width: 70px;
            float: left;
            margin-top: 5px;
            height: 30px;
          }
        }
        .warbill_f {
          .warbill_f_r {
            width: 90%;
            display: flex;
            .order-number-name {
              font-size: 13px;
              // padding-left: 10px;
            }
            .order-number-input_d {
              margin-left: 5px;
              background-color: transparent !important;
              border-radius: 2px;
              border: none;
              border-bottom: 1px solid #d5d5d5;
              font-size: 13px;
              width: 70px;
              float: left;
              margin-top: 5px;
              height: 30px;
            }
          }
        }
      }
    }
  }
  .footerwaybill {
    margin: 10px 0px 10px 0px;
    width: 98%;
    text-align: center;
  }
}

.footer {
  position: absolute;
  width: 100%;
  height: 50px;
  background: #f8f8f8;
  z-index: 100;
  bottom: 0px;
}
.el-button + .el-dropdown,
.el-dropdown + .el-button,
.el-dropdown + .el-dropdown {
  margin-left: 10px;
}
.button-wrap + .button-wrap {
  margin-left: 10px;
}
</style>